React配置proxy后图片请求404，如何禁用特定请求的代理？

我完全懂你现在的困扰——设置代理解决了API的CORS问题，结果图片请求也被莫名其妙代理了，换了setupProxy.js还是没搞定，移除代理又一堆CORS报错，连S3的图片都受影响。别着急，咱们一步步捋清楚问题出在哪，再解决它。

首先，你得先确认这几个关键点： #

1. package.json里的proxy和setupProxy.js不能共存
   如果你之前在package.json里加过"proxy": "http://localhost:3006/api"，一定要先把它删掉！因为当你使用http-proxy-middleware的自定义代理时，package.json里的简单代理配置会失效，甚至可能干扰自定义代理的逻辑。

2. 自定义代理要精准匹配路径
   你的setupProxy.js配置看起来只代理/api开头的请求，但图片还是被拦截，大概率是这两种情况：

   • 你的图片路径不小心写成了/api开头（比如/api/avatars/user1.jpg），这种会被代理到后端，但后端可能没有存储图片，所以访问失败；
   • 本地静态资源的路径处理有问题，比如图片放在public文件夹下，但请求路径没写对，导致被误代理。

修正后的setupProxy.js配置 #

给你调整一下代理配置，确保只有API请求被代理，静态资源和外部请求直接放行：

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

module.exports = function(app) {
  // 仅代理/api开头的API请求
  app.use('/api', createProxyMiddleware({
    target: 'http://localhost:3001',
    changeOrigin: true,
  }));

  // 放行所有静态资源请求（比如图片、CSS、JS）
  app.use(['/avatars', '/images', '/static'], (req, res, next) => {
    next(); // 直接跳过代理，让React处理这些请求
  });
};

这里的['/avatars', '/images', '/static']是假设你的图片路径前缀，你可以根据自己项目里的实际路径调整。如果是S3的图片，只要src是完整的绝对URL（比如https://your-bucket.s3.amazonaws.com/avatar.jpg），代理根本不会碰它，请求会直接发往S3。

解决移除代理后的CORS问题 #

如果你担心移除package.json的proxy后出现CORS报错，直接在后端配置CORS就行，以Express为例：

1. 安装cors依赖：

npm install cors

2. 在后端入口文件里添加CORS配置：

const cors = require('cors');
const express = require('express');
const app = express();

// 允许你的前端域名访问，比如React默认的localhost:3000
app.use(cors({
  origin: 'http://localhost:3000',
  credentials: true // 如果需要携带Cookie的话加上这行
}));

这样后端就会允许前端的跨域请求，不用依赖前端代理也能正常调用API。

最后检查你的图片组件 #

确保你的<Avatar>组件的src属性是正确的：

• 如果是本地图片：放在public文件夹下，路径写/avatars/xxx.jpg（直接从根目录开始）；
• 如果是S3图片：用完整的HTTPS URL，比如otherUser.avatar应该是类似https://xxx.s3.us-east-1.amazonaws.com/xxx.jpg的格式。

这样调整后，图片请求不会被代理拦截，API请求正常走代理，CORS问题也解决了。

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