1. 背景

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

2. 代理方式

create-react-app 默認(rèn)提供了兩種方式，關(guān)聯(lián)到 webpack-dev-server 中：

• 簡(jiǎn)單方式：在 package.json 中添加 proxy 字段，指定你的 mock server 地址就可以。
• 高級(jí)方式：在 src 下創(chuàng)建 setupProxy.js 文件，使用 http-proxy-middleware 來(lái)實(shí)現(xiàn)。

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

2.1 簡(jiǎn)單方式

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

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

代理流程在 react-script 中內(nèi)置寫(xiě)好了，流程如下：

#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請(qǐng)求開(kāi)始Get請(qǐng)求?請(qǐng)求 Public 目錄文件?代理請(qǐng)求不走代理sockjs-node 請(qǐng)求?text/html 類型請(qǐng)求?

只攔截當(dāng)前域名下的請(qǐng)求。

2.2 高級(jí)方式

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

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

在 src 下創(chuàng)建setupProxy.js 文件，基本結(jié)構(gòu)如下：

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

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

無(wú)需安裝 http-proxy-middleware，已經(jīng)內(nèi)置在 react-script 中。
注意 http-proxy-middleware 的版本，上例中的版本是 0.x，新版本改動(dòng)很大。
不要和 2.1 中的簡(jiǎn)單方式混用。

3. Mock Server

簡(jiǎn)單使用的話，直接用 http 創(chuàng)建一個(gè)就行。

3.1 創(chuàng)建 Server

可以創(chuàng)建一個(gè) mock.js 文件用來(lái)做這個(gè) 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 同時(shí)啟動(dòng) Server

在 package.json 中的 scripts 加一個(gè)并行執(zhí)行就可以了：

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

啟動(dòng)：

npm run start:with:mock

? Github 文章地址

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。