react如何配置代理

配置代理的方法

在React项目中配置代理可以通过修改package.json或使用http-proxy-middleware实现。以下是两种常见方法：

方法一：通过package.json配置

在package.json文件中添加proxy字段，指定后端API地址：

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

重启开发服务器后，所有未匹配的请求会自动转发到该地址。

方法二：使用http-proxy-middleware

安装依赖：

npm install http-proxy-middleware --save

在src目录下创建setupProxy.js文件（Create React App项目会自动加载该文件）：

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

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://your-backend-api.com',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    })
  );
};

这种方法支持更灵活的配置，如路径重写和多代理规则。

注意事项

开发环境代理仅适用于npm start运行的项目。生产环境需要配置服务器（如Nginx）或使用绝对URL请求API。

跨域问题通常只在开发时出现，生产环境应确保前端和后端在同一域名下或正确配置CORS。