佛山企业网站开发,做网站的公司在哪,上海公司法人落户条件,做app软件1. 背景
很多情况下#xff0c;为了测试需要一些接口的 mock 场景#xff0c;基于 create-react-app 生产的项目 好处在于它内置了这块代理的能力#xff0c;给用户提供了很大的方便。
2. 代理方式
create-react-app 默认提供了两种方式#xff0c;关联到 webpack-dev-s…
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 文章地址
