react中如何写proxy

在React中配置代理（Proxy）通常用于解决开发环境下的跨域问题，或转发API请求到后端服务器。以下是几种常见实现方式：

使用package.json配置

在React项目的package.json文件中添加proxy字段，直接指定后端服务器地址：

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

此方式仅适用于开发环境（npm start），所有未匹配静态资源的请求会自动转发到该地址。

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

此方法支持更灵活的路径匹配和重写规则。

自定义开发服务器配置

若使用自定义Webpack配置（如eject后的项目），可在webpack.config.js中修改devServer选项：

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

生产环境代理配置

生产环境需通过Nginx或Apache等服务器配置反向代理。例如Nginx配置示例：

location /api/ {
  proxy_pass http://backend-server;
  proxy_set_header Host $host;
}

注意事项

• 开发环境的代理配置仅对fetch或axios等网络请求生效，不影响静态资源路径。
• 路径匹配规则需与前端请求URL保持一致，避免出现404错误。
• 修改代理配置后需重启开发服务器才能生效。