react 如何设置 代理

设置代理的常见方法

在 React 项目中设置代理通常用于解决跨域问题或本地开发时的 API 请求转发。以下是几种常见的方法：

方法一：通过 package.json 配置代理

在 package.json 文件中添加 proxy 字段，指定代理目标地址。这种方法适用于 Create React App (CRA) 项目。

{
  "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,
    })
  );
};

方法三：通过环境变量配置代理

在 .env 文件中设置代理地址，适用于动态环境配置。

REACT_APP_API_URL=http://your-api-server.com

在代码中通过 process.env.REACT_APP_API_URL 访问该变量。

方法四：使用 Webpack Dev Server 代理

如果项目未使用 CRA，可以直接在 Webpack 配置中设置代理：

devServer: {
  proxy: {
    '/api': {
      target: 'http://your-api-server.com',
      changeOrigin: true,
    }
  }
}

注意事项

• 使用 http-proxy-middleware 时需确保文件名为 setupProxy.js，且位于 src 目录下。
• 修改代理配置后需要重启开发服务器。
• 生产环境通常不需要代理配置，应直接调用后端 API 地址。