React前端连接后端遇CORS策略拦截问题求助

这个CORS错误本质是后端问题——浏览器的同源安全机制要求后端必须在响应头中明确允许前端所在的域名发起跨域请求。不过开发阶段可以用React代理临时绕开，生产环境必须通过后端配置彻底解决。

一、开发阶段快速解决（React代理配置） #

如果你用的是Create React App初始化的项目，直接通过代理绕过CORS检查：

1. 打开项目根目录的package.json，在最外层添加一行代理配置：

"proxy": "https://localhost:8443"

2. 修改前端请求代码，把完整的后端地址改成相对路径，比如原本的https://localhost:8443/api/getData改成/api/getData
3. 重启React开发服务器，此时请求会被代理到后端，浏览器不会触发CORS拦截

二、生产环境/彻底解决方式（后端配置CORS） #

必须在后端服务中添加CORS响应头，以下是常见后端技术栈的配置示例：

• Node.js/Express：使用cors中间件

const cors = require('cors');
app.use(cors({
  origin: "你的前端实际域名，比如http://your-frontend.com", // 开发阶段可设为"http://localhost:3000"
  credentials: true // 若请求需要携带Cookie或认证信息，需开启此项
}));

• Java/Spring Boot：添加CORS配置类

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOrigin("你的前端域名");
        config.addAllowedMethod("*"); // 允许所有请求方法
        config.addAllowedHeader("*"); // 允许所有请求头
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

• Python/Flask：使用flask-cors扩展

from flask_cors import CORS
app = Flask(__name__)
CORS(app, origins="你的前端域名")

另外请确认你的.env配置无误，后端服务确实在https://localhost:8443正常运行。

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