react如何设置反向代理
如何在 React 中设置反向代理
使用 create-react-app 的 proxy 配置
在 package.json 文件中添加 proxy 字段，指向目标 API 服务器的地址。例如：
{
"proxy": "http://your-api-server.com"
}这样配置后，所有开发环境中的 API 请求会自动转发到指定的服务器地址。例如，请求 /api/data 会被转发到 http://your-api-server.com/api/data。
自定义代理配置（适用于复杂场景）
如果需要更灵活的代理规则，可以创建一个 setupProxy.js 文件（需安装 http-proxy-middleware）：
-
安装依赖：
npm install http-proxy-middleware --save-dev -
在
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': '' } }) ); };
#### 生产环境反向代理配置
在生产环境中，通常通过 Web 服务器（如 Nginx 或 Apache）配置反向代理。以下是 Nginx 的配置示例：
```nginx
server {
listen 80;
server_name your-domain.com;
location / {
root /path/to/react/build;
try_files $uri /index.html;
}
location /api {
proxy_pass http://your-api-server.com;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}注意事项
- 开发环境的代理仅适用于
npm start或yarn start启动的开发服务器。 - 生产环境必须通过 Web 服务器或云服务配置代理，React 本身不处理生产环境的代理。
- 如果 API 服务器需要跨域支持，确保后端已配置 CORS 或通过代理完全转发请求。
