ReactJS：如何仅让特定请求通过http-proxy-middleware代理

问题根源 #

你的当前配置里，两个全局app.use()中间件对所有请求（包括静态资源、API请求）都生效：

• 给所有响应强制设置Content-type: text/html，导致图片、CSS等静态资源被浏览器当成HTML解析，无法正常加载。
• 虽然Access-Control-Allow-Origin头对API请求有用，但静态资源本身不存在跨域问题，不需要额外添加。

另外，你的fetch请求里存在多余配置：Access-Control-Allow-Origin这类头是服务器响应头，不是前端请求头；mode: "no-cors"会让浏览器限制你读取响应内容，完全没必要——因为代理已经帮你解决了跨域。

修改步骤 #

1. 修正setupProxy.js配置

只保留API路径的代理中间件，移除全局的响应头设置：

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

module.exports = function (app) {
  // 仅对/api-prefix开头的请求做代理
  app.use(
    "/api-prefix",
    createProxyMiddleware({
      target: "https://dev.the-domain.com/",
      changeOrigin: true,
      secure: true,
      // 可选：如果后端API不需要/api-prefix前缀，可以添加路径重写
      // pathRewrite: { '^/api-prefix': '' }
    })
  );
};

• 代理中间件只会拦截/api-prefix开头的请求，静态资源请求会直接由本地服务器处理，不会被代理影响。
• changeOrigin: true会自动帮你处理跨域所需的Host头，后端会正确识别请求来源。

2. 修正fetch请求配置

去掉多余的请求头和no-cors模式，用相对路径简化请求：

fetch(`/api-prefix/api`, {
  headers: {
    "Content-Type": "application/json",
    Accept: "application/json",
  },
  method: "GET",
}).then(response => {
  if (!response.ok) throw new Error('请求失败');
  return response.json();
}).then(data => {
  // 处理返回数据
}).catch(err => {
  // 处理错误
});

• 使用相对路径/api-prefix/api，浏览器会自动拼接当前域名（http://localhost:3000），不需要手动写全路径。
• 移除Access-Control-Allow-Origin和Access-Control-Allow-Headers请求头，这些是服务器端设置的响应头，前端请求不需要带。
• 去掉mode: "no-cors"，这样你才能正常读取API返回的响应内容。

验证效果 #

• 静态资源（如logo图片）会直接从本地服务器加载，不会经过代理，Content-Type保持正确，能正常显示。
• /api-prefix开头的请求会被代理到https://dev.the-domain.com/，代理自动处理跨域，不会再出现CORS错误。

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