1. 背景

很多情況下，為了測試需要一些接口的 mock 場景，基于 create-react-app 生產的項目 好處在于它內置了這塊代理的能力，給用戶提供了很大的方便。

2. 代理方式

create-react-app 默認提供了兩種方式，關聯到 webpack-dev-server 中：

• 簡單方式：在 package.json 中添加 proxy 字段，指定你的 mock server 地址就可以。
• 高級方式：在 src 下創建 setupProxy.js 文件，使用 http-proxy-middleware 來實現。

這兩種方式都不用執行 npm run eject 就可以使用。

2.1 簡單方式

如我的 mock server 是 http://localhost:4000，則在 package.json 中配置：

{..."proxy": "http://localhost:4000"... }

代理流程在 react-script 中內置寫好了，流程如下：

#mermaid-svg-QcQ8IKz3ICaYeybR {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-QcQ8IKz3ICaYeybR .error-icon{fill:#552222;}#mermaid-svg-QcQ8IKz3ICaYeybR .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-QcQ8IKz3ICaYeybR .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-QcQ8IKz3ICaYeybR .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-QcQ8IKz3ICaYeybR .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-QcQ8IKz3ICaYeybR .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-QcQ8IKz3ICaYeybR .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-QcQ8IKz3ICaYeybR .marker{fill:#333333;stroke:#333333;}#mermaid-svg-QcQ8IKz3ICaYeybR .marker.cross{stroke:#333333;}#mermaid-svg-QcQ8IKz3ICaYeybR svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-QcQ8IKz3ICaYeybR .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-QcQ8IKz3ICaYeybR .cluster-label text{fill:#333;}#mermaid-svg-QcQ8IKz3ICaYeybR .cluster-label span{color:#333;}#mermaid-svg-QcQ8IKz3ICaYeybR .label text,#mermaid-svg-QcQ8IKz3ICaYeybR span{fill:#333;color:#333;}#mermaid-svg-QcQ8IKz3ICaYeybR .node rect,#mermaid-svg-QcQ8IKz3ICaYeybR .node circle,#mermaid-svg-QcQ8IKz3ICaYeybR .node ellipse,#mermaid-svg-QcQ8IKz3ICaYeybR .node polygon,#mermaid-svg-QcQ8IKz3ICaYeybR .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-QcQ8IKz3ICaYeybR .node .label{text-align:center;}#mermaid-svg-QcQ8IKz3ICaYeybR .node.clickable{cursor:pointer;}#mermaid-svg-QcQ8IKz3ICaYeybR .arrowheadPath{fill:#333333;}#mermaid-svg-QcQ8IKz3ICaYeybR .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-QcQ8IKz3ICaYeybR .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-QcQ8IKz3ICaYeybR .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-QcQ8IKz3ICaYeybR .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-QcQ8IKz3ICaYeybR .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-QcQ8IKz3ICaYeybR .cluster text{fill:#333;}#mermaid-svg-QcQ8IKz3ICaYeybR .cluster span{color:#333;}#mermaid-svg-QcQ8IKz3ICaYeybR div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-QcQ8IKz3ICaYeybR :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}YesNoYesNoYesNoYesNo請求開始Get請求?請求 Public 目錄文件?代理請求不走代理sockjs-node 請求?text/html 類型請求?

只攔截當前域名下的請求。

2.2 高級方式

react-script 在 react-scripts/config/webpackDevServer.config.js 中通過如下判斷，將 setupProxy.js 作為中間件放在 dev server 中：

if (fs.existsSync(paths.proxySetup)) {require(paths.proxySetup)(app); }

在 src 下創建setupProxy.js 文件，基本結構如下：

const proxy = require("http-proxy-middleware");module.exports = function (app) {app.use("/api", // 代理 /api 的請求proxy({target: "http://localhost:4000",logLevel: "debug",changeOrigin: true,})); };

上例會攔截所有 /api 的請求。此模式可以攔截一切請求，詳情參考：文檔。

無需安裝 http-proxy-middleware，已經內置在 react-script 中。
注意 http-proxy-middleware 的版本，上例中的版本是 0.x，新版本改動很大。
不要和 2.1 中的簡單方式混用。

3. Mock Server

簡單使用的話，直接用 http 創建一個就行。

3.1 創建 Server

可以創建一個 mock.js 文件用來做這個 Server：

const http = require("http"); const PORT = 4000;http.createServer(function ({ method, url }, res) {const search = new URL(url, `http://localhost:${PORT}`).searchParams;if (method == "POST") {// ……}if (method == "GET") {// 模擬延遲if (search.get("t")) {return setTimeout(() => res.end(), search.get("t"));}return res.end(JSON.stringify({success: true,content: "from mock",}));}}).listen(PORT);

3.2 同時啟動 Server

在 package.json 中的 scripts 加一個并行執行就可以了：

"scripts": {"start": "react-scripts start","start:with:mock": "node mock.js & npm run start"},

啟動：

npm run start:with:mock

? Github 文章地址

總結

以上是生活随笔為你收集整理的create-react-app 使用代理做 mock的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。