react如何配置代理

配置代理的常见方法

在React项目中配置代理通常用于解决开发环境下的跨域问题。以下是几种常用方法：

使用package.json配置

在项目根目录的package.json文件中添加proxy字段：

{
  "proxy": "http://your-api-server.com"
}

这种方法仅适用于开发环境，生产环境需要其他解决方案。

使用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,
      pathRewrite: {
        '^/api': ''
      }
    })
  );
};

这种方法提供更灵活的配置选项。

配置多个代理

在setupProxy.js中可以配置多个代理规则：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api1',
    createProxyMiddleware({
      target: 'http://server1.com',
      changeOrigin: true
    })
  );

  app.use(
    '/api2',
    createProxyMiddleware({
      target: 'http://server2.com',
      changeOrigin: true
    })
  );
};

环境变量配置

结合环境变量动态设置代理目标：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: process.env.REACT_APP_API_URL,
      changeOrigin: true
    })
  );
};

在.env文件中设置：

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

注意事项

• 代理配置仅适用于开发环境，生产环境需要配置服务器端代理或使用CORS
• 修改代理配置后需要重启开发服务器
• 路径重写功能可以帮助简化API调用路径
• 使用HTTPS后端时可能需要配置secure: false选项