React 使用 Proxy 代理(create-react-app)
在create-react-app 中配置proxy代理
proxy,默认为NULL,类型为URL,一个为了发送http请求的代理
在平时开发时,尤其前后端分离时,需要假数据来进行模拟请求,这个时候就需要proxy
代理来处理
create-react-app < 2.0
package.json 中配置
1 | "proxy":{ |
create-react-app > 2.0
package.json 中配置(不推荐)
1 | "proxy": "https://easymock.spiritling.pub/", |
配置文件 /src/setupProxy.js
(推荐)
将 create-react-app
解包后,可以在 config
文件夹下找到配置
在 config/path.js
中存在 proxySetup: resolveApp('src/setupProxy.js'),
而 proxySetup
是只在 webpackDevServer.config.js
文件中使用,也就是说只在开发时使用
所以,可以在 /src/setupProxy.js 中配置
首先安装 http-proxy-middleware
1 | npm install http-proxy-middleware -D |
然后文件配置
1 | const proxy = require('http-proxy-middleware'); |
使用例子
01
1 | const proxy = require('http-proxy-middleware'); |
游览器中请求为 https://example.com/api/v1/login
则经过代理后可以转为 https://easymock.spiritling.pub/api/v1/login
02
1 | const proxy = require('http-proxy-middleware'); |
游览器中请求为 https://example.com/api/v1/login
则经过代理后可以转为 https://easymock.spiritling.pub/login
http-proxy-middleware
新版本 ≧ 1.0.0
在新版本大于等于 1.0.0 时使用会出现如下问题
1 | proxy is not a function |
也就是说 http-proxy-middleware
或者 setupProxy
会出现报错 proxy is not a function
所以需要使用新版本的写法才可以
1 | const { createProxyMiddleware } = require('http-proxy-middleware'); |