react网络请求如何设置代理
在 React 中设置代理
React 项目中可以通过配置代理解决跨域问题，以下是常见的几种方法：
使用 create-react-app 的 proxy 配置
在 package.json 中直接添加 proxy 字段，适用于开发环境：
{
"name": "react-app",
"version": "1.0.0",
"proxy": "http://your-api-server.com"
}这种方式会将所有未知请求转发到指定的代理服务器。
通过 http-proxy-middleware 配置
如果需要更灵活的代理规则（如多代理或路径匹配），可以手动设置：
-
安装依赖：
npm install http-proxy-middleware --save -
在
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, pathRewrite: { '^/api': '' } }) ); };
#### 生产环境代理配置
生产环境需要通过服务器（如 Nginx）配置代理：
```nginx
server {
listen 80;
server_name your-frontend.com;
location /api {
proxy_pass http://your-api-server.com;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}使用环境变量
结合环境变量动态设置代理目标：
// .env.development
REACT_APP_API_URL=/api
// 请求代码
axios.get(`${process.env.REACT_APP_API_URL}/endpoint`);注意：
- 开发环境代理仅在
react-scripts start时生效 - 修改代理配置后需要重启开发服务器
- 生产环境必须通过服务器配置或使用 CORS
