苹果设备下载文件时经常出现文件名为URL编码的问题

我发现我在 iPhone 和 Mac 上下载的文件，有些时候文件名是 URL 编码的，不是正常的文件名，类似于 %E6%B5%8B%E8%AF%95%E6%96%87%E4%BB%B6.txt。但是我好像在 Windows 上从来没遇到过这种情况。

问了 GPT 之后，发现这是网站的代码可能写得不是太规范。在下载文件的响应里面，Content-Disposition 只设置了 filename,没有设置 filename*.

在 Windows 上，因为我一直使用的是 Chrome 浏览器，而 Chrome 浏览器对这种不规范的做了兼容，所以就导致我在 Windows 上是没有问题的。

为了验证这个结论，于是我在 Cloudflare 上部署了这样一个网站： https://shy-cherry-25e0.darcy.workers.dev/. 打开的时候会自动下载一个文件。网站的代码很简单

export default {
  async fetch(request, env, ctx) {
    const fileName = "%E6%B5%8B%E8%AF%95%E6%96%87%E4%BB%B6.txt";

    return new Response("这是测试文件内容。\n", {
      headers: {
        "Content-Type": "text/plain; charset=utf-8",
        "Content-Disposition": `attachment; filename=${fileName}`,
      },
    });
  },
};

在 Mac 上测试苹果的 Safari 浏览器和 Chrome 浏览器，我发现确实是这个样子：同样一个网站，Safari 保留的是 URL 编码的文件名，但是 Chrome 保存的是正常的文件名

Safari结果 Chrome结果

这里其实还有一个值得后面反思的地方，就是我之前看到这个现象的时候没有用控制变量法，以为是 Mac 上才会出现这个问题，但其实我在 Mac 和 Windows 上用的浏览器都不一样。真正不同的地方在于浏览器，而不是系统。所以后面定位问题的时候，尽量要通过对比，找到真正不同的地方，避免在问问题之前，就把对象给搞错了。