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

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

webpack-dev-server配置 修改webpack配置（非CRA项目）：

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

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

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

注意事项

• 代理配置仅影响开发服务器（npm start）
• 生产环境需要通过Nginx等服务器配置反向代理
• 复杂路径匹配建议使用http-proxy-middleware
• 修改配置后需要重启开发服务器