react如何配置跨域
配置 React 跨域的几种方法
在开发 React 应用时，跨域问题通常出现在前端与后端 API 交互时。以下是常见的解决方案：
开发环境配置代理
在 package.json 中添加 proxy 字段，将 API 请求代理到目标服务器：
{
"proxy": "http://your-backend-server.com"
}这种方法仅适用于开发环境（通过 react-scripts start 运行）。
使用 http-proxy-middleware
创建 src/setupProxy.js 文件（Create React App 项目会自动加载该文件）：
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://your-backend-server.com',
changeOrigin: true,
})
);
};生产环境配置
生产环境需要通过服务器（如 Nginx）配置反向代理：
location /api {
proxy_pass http://your-backend-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();
});浏览器插件临时方案
开发时可使用浏览器插件如 CORS Unblock 临时解决跨域问题，但不推荐用于生产环境。
Fetch API 配置
在请求时添加 mode: 'cors' 和凭证配置：
fetch('http://api.example.com', {
mode: 'cors',
credentials: 'include'
})选择哪种方法取决于具体开发环境和项目需求。开发环境推荐使用代理方案，生产环境应通过服务器配置或后端 CORS 支持解决。
