react如何配置代理

配置代理的常见方法

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

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

{
  "proxy": "http://localhost:5000"
}

这种方式会将所有未知请求转发到指定的后端地址，仅适用于简单场景。

使用http-proxy-middleware 创建src/setupProxy.js文件（Create React App项目）：

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

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

这种方式支持更灵活的路径匹配和配置选项。

自定义代理配置

对于非Create React App项目或需要复杂代理规则时：

Webpack开发服务器配置 修改webpack.config.js的devServer选项：

devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:5000',
      pathRewrite: { '^/api': '' },
      secure: false
    }
  }
}

环境变量配置 结合环境变量实现多环境代理：

const target = process.env.REACT_APP_API_URL || 'http://localhost:5000';

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

注意事项

• 代理配置仅影响开发服务器（npm start），生产环境需要后端配置CORS或使用相同域名
• 路径重写（pathRewrite）可用于去除API请求中的前缀
• changeOrigin: true可以修改请求头中的host值
• 修改代理配置后需要重启开发服务器

对于最新版本的Create React App（v5+），推荐使用setupProxy.js方式，因为它不依赖已被移除的http-proxy-middleware依赖。