react如何配置代理

配置代理的几种方法

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

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

"proxy": "http://localhost:5000"

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

使用http-proxy-middleware 创建src/setupProxy.js文件（无需手动引入）：

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

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

这种方式支持更灵活的配置，可以指定特定路径转发。

Webpack配置 修改webpack.config.js（适用于eject后的项目）：

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

注意事项

• 代理配置仅在开发环境生效
• 生产环境需要后端服务配置CORS或使用Nginx反向代理
• 路径重写可通过pathRewrite参数实现
• 修改配置后需要重启开发服务器