react实现跨域
解决 React 跨域问题的方法
React 应用中常见的跨域问题通常发生在开发阶段（如使用 create-react-app）或生产环境与不同域名的 API 交互时。以下是几种解决方案：
开发环境配置代理
在 package.json 中添加 proxy 字段，将 API 请求转发到目标服务器：
"proxy": "http://your-api-server.com"重启开发服务器后，React 会自动将未匹配静态资源的请求转发到该地址。
使用 http-proxy-middleware
对于更复杂的代理需求（如多路径转发），创建 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,
})
);
};此方法无需手动重启开发服务器。
生产环境 CORS 配置
若 API 服务器可控，在后端添加 CORS 头：
// Node.js Express 示例
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
});第三方库解决方案
使用 cors-anywhere 临时代理请求：
// 安装后运行代理服务器
const corsAnywhere = require('cors-anywhere');
corsAnywhere.createServer({
originWhitelist: [],
requireHeader: [],
removeHeaders: []
}).listen(8080);前端请求改为访问代理服务器地址。
浏览器插件临时方案
开发时可安装 Allow CORS 等浏览器插件临时禁用同源策略（仅限调试）。
注意事项
- 生产环境避免使用
*通配符，应指定具体域名。 - 敏感接口需结合身份验证和
Access-Control-Allow-Credentials。 - HTTPS 环境下需确保所有资源均为安全协议。
以上方法根据实际场景选择组合使用，开发环境推荐代理方案，生产环境优先后端配置 CORS。
