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;}

Yes

请求开始

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相关推荐

如何使用Create React App DevOps自动化工作中所有无聊的部分
by James Y Rauhut 詹姆士·鲁豪(James Y Rauhut) 如何使用Create React App DevOps自动化工作中所有无聊的部分 (How I automate al ...
Create React App proxy配置
最近又吃了没文化的亏(哭晕在洗手间≧ ﹏ ≦) 做后台管理系统的时候,需要调一个易连云打印小票的接口, 项目框架是 Create React App+typescript,后端是node.js 本媛负 ...
深入浅出 Create React App
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
【翻译】基于 Create React App路由4.0的异步组件加载（Code Splitting）
基于 Create React App路由4.0的异步组件加载本文章是一个额外的篇章,它可以在你的React app中,帮助加快初始的加载组件时间.当然这个操作不是完全必要的,但如果你好奇的话,请随 ...
在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] 本文演示了如何将 Crea ...
Create React App 2.0 正式发布：Babel 7、webpack 4 等
英文原文:Create React App 2.0: Babel 7, Sass, and More – React Blog 以下是简要翻译 React 本身是没有附带任何编译工具的,如果没有测试运 ...
Vite 3.0 vs. Create React App：比较和迁移指南
Create React App (CRA) 在 React 社区及其整个生态系统的发展中发挥了关键作用. 在突发奇想构建本地 React 开发环境时,它是不同技能的开发人员的首选工具. CRA 拥有 ...
Create React App 2.0 华丽登场
贺! Create React App 2.0 在 10/02 正式发布 ?????? Create React App 是由官方所维护的开发工具,主要提供了专属于 React 开发环境的前置工作.简 ...
Create React App从使用到Docker部署
一.介绍 Create React App 是 React 脚手架,它帮我们可以快速生成项目的工程化结构,脚手架让项目从搭建到开发再到部署,整个流程变得快速和便捷. 二.安装 Create React ...
react快速开始(二)-使用脚手架Create React App创建react应用
文章目录 react快速开始(二)-Create React App入门什么是Create React App 快速开始使用IDE webstrom创建react项目 create react a ...

create-react-app 使用代理做 mock