react如何配置跨域
配置 React 跨域的方法
在 React 项目中配置跨域通常涉及开发环境和生产环境的处理。以下是几种常见方法：
开发环境配置
修改 package.json 文件，添加 proxy 字段指向目标 API 地址：
"proxy": "http://your-api-server.com"使用 http-proxy-middleware 创建代理配置文件（适用于 Create React App）：
- 在
src目录下创建setupProxy.js - 添加以下代码：
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) { app.use( '/api', createProxyMiddleware({ target: 'http://your-api-server.com', changeOrigin: true, }) ); };
生产环境配置
通过后端服务器配置反向代理（Nginx 示例）：
```nginx
location /api/ {
proxy_pass http://your-api-server.com/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}CORS 头部配置
后端应设置正确的 CORS 头部：
// Express 示例
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
});直接请求处理
在前端代码中设置请求模式：
fetch('http://api.example.com/data', {
mode: 'cors',
headers: {
'Content-Type': 'application/json'
}
})注意事项
- 开发环境代理仅适用于本地开发服务器
- 生产环境必须通过服务器配置或后端支持 CORS
- 敏感接口不应使用
Access-Control-Allow-Origin: *
