React+Axios从S3取图片遇CORS错误，代理方案无效求解决

一、CORS错误的修复 #

1. 移除错误的请求头设置 #

你添加的Access-Control-Allow-Origin和Access-Control-Allow-Credentials是服务器响应头，前端请求时设置这些完全无效，浏览器会直接忽略，甚至可能导致预检请求失败。直接删掉这些请求头，用原生fetch或axios正常请求即可：

// 正确的fetch写法
fetch(fileUrl)
  .then(response => response.blob())
  .then(blob => {
    // 处理图片，比如转成可访问的URL
    const imgUrl = URL.createObjectURL(blob);
    // 赋值给img标签src等后续操作
  });

// 或者用axios的写法
axios.get(fileUrl, { responseType: 'blob' })
  .then(res => {
    const imgUrl = URL.createObjectURL(res.data);
    // 后续处理逻辑
  });

2. 确认S3 CORS配置生效 #

• S3的CORS配置修改后，通常需要1-5分钟才会生效，修改后等待一段时间再测试。
• 检查配置CORS的bucket是否与请求文件所在的bucket一致。
• 测试阶段确保目标图片文件权限为公开可读（可临时设置Everyone拥有读权限），如果是私有文件需用签名URL访问，但CORS测试建议先使用公开文件。

二、代理配置不生效的修复 #

1. setupProxy.js的适用场景 #

src/setupProxy.js是create-react-app（CRA）默认开发服务器的专属配置，只有用npm start启动时才会自动加载。你用webpack --mode development --watch启动属于自定义webpack环境，这个文件不会被执行。

2. 自定义webpack环境的代理配置 #

在你的webpack.config.js中添加devServer.proxy配置：

module.exports = {
  // ...其他webpack配置项
  devServer: {
    proxy: {
      // 匹配以/s3开头的请求，转发到S3 bucket
      '/s3': {
        target: 'https://xxx-xxx-xxx.s3.ap-northeast-1.amazonaws.com',
        changeOrigin: true,
        // 去掉请求路径中的/s3前缀
        pathRewrite: { '^/s3': '' }
      }
    }
  }
};

之后请求图片时，把原URL替换为/s3/0.png，示例：

fetch('/s3/0.png')
  .then(response => { /* 处理响应逻辑 */ });

3. 若使用CRA，改用正确启动方式 #

如果你是基于CRA创建的项目，不要直接用webpack命令启动，执行npm start，CRA会自动加载src/setupProxy.js。同时修正setupProxy.js的配置（target应为bucket域名，而非具体文件路径）：

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    "/s3",
    createProxyMiddleware({
      target: "https://xxx-xxx-xxx.s3.ap-northeast-1.amazonaws.com",
      changeOrigin: true,
      pathRewrite: { '^/s3': '' }
    })
  );
};

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