前端react：在create-react-app構建的工程中配置網絡請求代理

1、在終端terminal執行以下命令，進行react工程自動構建：

npx create-react-app my-app

2、在終端terminal執行以下命令,暴露項目的配置文件

npm run eject

注：若已有用create-react-app構建的react工程，無需執行步驟1和2；

3、在scripts/start.js中有這麼一句從package.json獲取proxy配置的代碼；

圖 1

4、在package.json中添加以下配置：

圖2

注：執行npm start啟動項目，可能會出現以下錯誤，原因是使用 create-react-app 搭建腳手架，在 CRA2.X 升級之後，對 proxy 的設置作了修改。詳見https://create-react-app.dev/docs/proxying-api-requests-in-development。

圖3

解決方案：

1）安裝 http-proxy-middleware 插件：

 npm install http-proxy-middleware --save

2）在src目錄下文件setupProxy.js ，並在文件中添加以下內容；根據項目的服務器地址配置proxy參數，若有多個接口地址，可配置多個的 app.use(proxy());

const proxy = require("http-proxy-middleware");
module.exports = function(app) {
 app.use(
 proxy("/xxx", {
 target: "http://127.0.0.1:8080",
 changeOrigin: true,
 })
 );
};

5、測試

效果如下：