前端开发避坑指南：React 代理配置常见问题与解决方案

一、为什么需要配置代理？

    React 应用在开发过程中经常需要与后端 API 进行通信，但由于浏览器的同源策略限制，直接跨域访问会遇到问题。这时就需要配置代理来解决跨域请求的问题。在前后端分离的开发模式中，前端应用和后端 API 通常运行在不同的域名或端口上。例如：

• 前端 React 应用运行在 http://localhost:3000
• 后端 API 服务运行在 http://localhost:5000

    当 React 应用尝试访问后端 API 时，浏览器会因为同源策略（协议、域名、端口必须完全一致）而阻止请求，导致跨域错误。代理服务器的作用就是在开发环境中，将前端的请求转发到后端服务器，同时处理跨域问题。

二、使用 create-react-app 默认配置代理

    如果你使用 create-react-app 创建的项目，那么可以通过 package.json 来启用代理，在 package.json 文件中添加 proxy 字段：

{
   
  "name": "my-app",
  "version": "0.1.0",
  "proxy": "http://localhost:5000"
}

    这种配置方式适用于所有 API 请求都指向同一个后端服务器的情况。例如，当你在 React 应用中请求 /api/users 时，开发服务器会自动将请求转发到 http://localhost:5000/api/users。这种配置方式相对简单，适用于大多数场景，但是只能配置一个代理目标
无法自定义更复杂的代理规则（如路径重写、headers 修改等），这一点从webpack配置规则里面可以看到：

三、使用 http-proxy-middleware 配置复杂代理

    当需要更灵活的代理配置时，可以使用 http-proxy-middleware 包，首先安装依赖：

npm install http-proxy-middleware --save-dev

    接下来，创建代理配置文件，在 src 目录下创建 setupProxy.js 文件（注意：文件名必须是这个，create-react-app 会自动识别）：

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

module.exports = function(app) {
   
  // 代理 API 请求
  app.use(
    '/api',
    createProxyMiddleware({
   
      target: 'http://localhost:5000',//目标服务器地址
      changeOrigin: true,//是否修改请求头中的Origin字段，也就是从原来的localhost:3000修改成了5000
      pathRewrite: {
   
        '^/api': '' // 移除路径中的 /api 前缀
      },
      timeout: 5000,  // 配置代理超时时间（毫秒）