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 配置

如果需要更灵活的代理规则（如多代理或路径匹配），可以手动设置：

1. 安装依赖：

   npm install http-proxy-middleware --save

2. 在 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