React新手求助：处理SEE_OTHER响应实现文件下载时遇跨域问题

你遇到的是浏览器同源策略导致的CORS限制问题——当你尝试通过AJAX请求去获取另一个域名下的文件时，对方服务器没有返回Access-Control-Allow-Origin头，浏览器就会阻止这个请求，抛出你看到的错误。

下面给你几个可行的解决方案，按优先级排序：

1. 优先通过后端解决（最优方案） #

如果你们团队能控制后端服务，这是最稳妥的方式：

• 给文件服务器添加CORS头：让托管www.xyz.com/abc.json的服务器配置Access-Control-Allow-Origin头，允许你的前端域名（比如http://your-frontend-domain.com）访问。如果要允许所有域名，可以设为*，但生产环境不建议这么做，尽量指定具体域名。
• 后端代理文件请求：让你的后端服务作为中间层，前端请求自己的后端接口，后端去调用www.xyz.com/abc.json获取文件内容，再把文件流返回给前端。这样前端和自己的后端是同源的，完全不会触发CORS限制。

2. 前端绕过AJAX跨域检查（后端不可控时用） #

如果没办法修改文件服务器的配置，你可以换一种方式下载——不用AJAX请求，而是让浏览器直接发起导航请求，这种方式不会触发CORS检查：

方法一：创建隐藏的a标签触发下载 #

// 假设你已经从SEE_OTHER响应中拿到了fileUrl
const handleDownload = (fileUrl) => {
  const link = document.createElement('a');
  link.href = fileUrl;
  // 可选：指定下载后的文件名，不填的话会用URL里的文件名
  link.download = 'abc.json';
  // 用_blank打开，避免当前页面跳转
  link.target = '_blank';
  // 临时添加到DOM，触发点击后移除
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

方法二：直接用window.open打开URL #

const handleDownload = (fileUrl) => {
  // 打开新窗口下载文件，注意有些浏览器会拦截非用户主动触发的弹窗
  window.open(fileUrl, '_blank');
};

⚠️ 注意：这种前端方式有个限制——如果文件URL需要携带认证信息（比如cookie），跨域情况下浏览器可能不会自动携带，导致下载失败。这种情况还是得回到后端代理的方案。

内容的提问来源于stack exchange，提问作者Jayant Narwani