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

????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修改成了5000pathRewrite: {'^/api': '' // 移除路徑中的 /api 前綴},timeout: 5000,  // 配置代理超時時間（毫秒）