create-react-app 使用代理做 mock

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 中内置写好了,流程如下:

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享