React应用中package.json的proxy配置失效及CORS报错求助

我的React应用部署在localhost:3000，要连接的后端服务器部署在localhost:8080。我在package.json中配置了：

"proxy": "http://localhost:8080"

但执行fetch('/', { /* 配置项 */ })时，浏览器显示请求发送到了http://localhost:3000，之前其他项目里这么配置proxy是有效的，这次却不行。我试过删除node_modules和package-lock.json后重新npm install，没有效果。

如果直接请求fetch('http://localhost:8080', { /* 配置项 */ })，地址是对的，但出现CORS错误：

Access to fetch at 'http://localhost:8080/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我没接触过CORS，想问两个问题：

1. 如何让React的proxy配置生效？
2. 如何解决CORS问题？两个服务器都是我自己运行的，这类检查没必要。

1. 让React的proxy配置生效 #

核心前提 #

proxy字段仅在create-react-app（CRA）官方脚手架创建的项目中生效，自定义Webpack配置或其他脚手架不支持该字段。

具体解决步骤 #

• 重启开发服务器：修改package.json中的proxy字段后，必须重启React开发服务器（npm start），否则配置不会加载，这是最容易忽略的点。
• 检查请求路径：如果后端接口不是部署在根路径，比如接口以/api开头，要确保fetch请求写的是fetch('/api/xxx')，CRA的proxy只会转发非静态资源的请求到目标地址。
• 升级到setupProxy.js配置（适用于CRA v5+）：如果直接在package.json配置proxy无效，在项目的src目录下创建setupProxy.js文件，内容如下：

  const { createProxyMiddleware } = require('http-proxy-middleware');
  
  module.exports = function(app) {
    app.use(
      '/',
      createProxyMiddleware({
        target: 'http://localhost:8080',
        changeOrigin: true,
      })
    );
  };
  

  保存后重启开发服务器，所有根路径的请求都会自动转发到localhost:8080。

2. 解决CORS问题 #

CORS是浏览器的安全机制，阻止跨域请求，既然两个服务都是你自己的，直接在后端配置允许跨域即可，不同后端框架的配置方式如下：

Node.js/Express后端 #

• 安装cors中间件：npm install cors
• 在后端代码中启用：

  const express = require('express');
  const cors = require('cors');
  const app = express();
  
  // 开发环境允许所有来源的请求
  app.use(cors());
  
  // 或者仅允许localhost:3000的请求（更严谨）
  // app.use(cors({ origin: 'http://localhost:3000' }));
  
  // 你的路由逻辑...
  app.listen(8080, () => console.log('服务器运行在8080端口'));
  

Java Spring Boot后端 #

• 在控制器类添加注解：

  @CrossOrigin(origins = "http://localhost:3000")
  @RestController
  public class YourController {
      // 接口逻辑...
  }
  

• 或者全局配置跨域：

  @Configuration
  public class CorsConfig implements WebMvcConfigurer {
      @Override
      public void addCorsMappings(CorsRegistry registry) {
          registry.addMapping("/**")
                  .allowedOrigins("http://localhost:3000")
                  .allowedMethods("GET", "POST", "PUT", "DELETE")
                  .allowCredentials(true);
      }
  }
  

Python Flask后端 #

• 安装flask-cors：pip install flask-cors
• 在后端代码中启用：

  from flask import Flask
  from flask_cors import CORS
  
  app = Flask(__name__)
  CORS(app)  # 允许所有来源
  
  # 或者指定允许的来源
  # CORS(app, resources={r"/*": {"origins": "http://localhost:3000"}})
  
  # 你的路由逻辑...
  if __name__ == '__main__':
      app.run(port=8080)
  

注意 #

不要使用mode: 'no-cors'，这种方式会返回不透明响应，你无法读取响应的内容，仅适用于获取不需要处理的资源（如图片）。

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