一、 package.json
配置方式
全部以
GET
请求为例,每次修改配置后,重启项目,否则不生效
。访问 http://127.0.0.1:6000/api/user/list 接口为例
检查自己脚手架版本
sh $ create-react-app -V
若脚手架版本在
2.0
以下,可以使用对象类型配置代理,在项目的package.json
文件中配置如下:js "proxy": { "/api": { "target": "http://127.0.0.1:6000/api", # 跨域地址 "changeOrigin": true, # 是否允许跨域 "pathRewrite": { # 重写路径 "^/api": "" } } }
举例:
配置好后,按代理标识访问
js useEffect(() => { $get('/api/user/list').then(res => { console.log(res) }).catch((err) => { console.log(err) }) }, [])
若脚手架版本在
2.0
以上,只能配置string
类型js "proxy": "http://127.0.0.1:6000"
举例:
配置好之后可以直接访问
```js // 方式一:不带域名,直接接口地址即可 useEffect(() => { $get('/api/user/config_name').then(res => { console.log(res) }).catch((err) => { console.log(err) }) }, [])
// 方式二:带上域名也没问题,但是这种写法发布到线上就会有问题,需要判断环境切换域名 useEffect(() => { $get('http://127.0.0.1:6000/api/user/list').then(res => { console.log(res) }).catch((err) => { console.log(err) }) }, []) ```
二、 setupProxy.js
配置方式 (推荐方案)
配置一个或多个代理,最好的方式是使用
middleware
中间件进行配置。检查
package.json
中是否安装了http-proxy-middleware
,如果没有手动安装下:```sh
yarn
$ yarn add http-proxy-middleware
npm
$ npm i http-proxy-middleware ```
在
src
中,新建setupProxy.js
(文件名固定,不可自定义,react
脚手架会识别),在文件中写以下配置内容(新项目都是推荐使用高版本,不然可能会无法启动项目)。文件路径: /src/setupProxy.js
http-proxy-middleware
(1.0
以后):```js const proxy = require('http-proxy-middleware')
module.exports = function (app) { app.use( // 代理 1 proxy.createProxyMiddleware('/api', { // 匹配到 '/api' 前缀的请求,就会触发该代理配置 target: 'http://127.0.0.1:6000/api', // 请求转发地址 changeOrigin: true, // 是否跨域 /* changeOrigin 为 true 时,服务器收到的请求头中的host为:127.0.0.1:6000,也就是代理地址的 host changeOrigin 为 false 时,服务器收到的请求头中的host为:localhost:3000,也就是本地站点地址的 host changeOrigin 默认 false,但一般需要将 changeOrigin 值设为 true,根据自己需求调整 */ pathRewrite: { '^/api': '' // 重写请求路径 } }), // 代理 2,为什么 2 写前面,因为匹配规则,上面第一个已经是 /api 了,要不然会优先匹配到第一个代理上 proxy.createProxyMiddleware('/2api', { target: 'http://127.0.0.1:6000/api', changeOrigin: true, pathRewrite: { '^/2api': '' } }), // 代理 3,这种写法是最规范的,前后都加 / proxy.createProxyMiddleware('/3api/', { target: 'http://127.0.0.1:6000/api/', changeOrigin: true, pathRewrite: { '^/3api/': '' } }), // 代理 4,这种代理标识尾部加 / ,代理地址尾部没有 proxy.createProxyMiddleware('/4api/', { target: 'http://127.0.0.1:6000/api', changeOrigin: true, pathRewrite: { // '^/4api/': '' // 这种替换成空,也没问题,但是不严谨 '^/4api/': '/' // 这样写更规范 } }) // ..... 多个代理 ) } ```
http-proxy-middleware
(1.0
以前,老版本):```js const proxy = require('http-proxy-middleware')
module.exports = function (app) { app.use( // 代理 1 proxy('/api', { target: 'http://127.0.0.1:6000/api', changeOrigin: true, pathRewrite: { '^/api': '' } }), // 代理 2 proxy('/2api', { target: 'http://127.0.0.1:6000/api', changeOrigin: true, pathRewrite: { '^/2api': '' } }) ) } ```
三、 webpack
配置方式
如果是新建项目,可以了解下 $ npm run eject 命令的作用,文章底部。
执行解包命令,如果已经解包,忽略。
sh $ npm run eject
找到
webpack
代理相关配置,在/config/webpackDevServer.config.js
文件中搜索proxy
。将
proxy
修改为js proxy: { '/api': { target: 'http://127.0.0.1:6000/api', changeOrigin: true, pathRewrite: { '^/api': '' } } // 更多代理配置 },
四、 自定义 webpack
配置文件方式
这种就不写了,写个
demo
麻烦,比如用最新版本的webpack
搭建一个React
项目,脚手架可能还不支持,或者手痒想全部走自定义的webpack
配置,这个时候就需要单独webpack
各个环境的配置文件,然后修改package.json
中的执行命令,走自定义的webpack
配置文件。
土、上面几种代理配置方式,配置后的使用案例代码
案例代码
js useEffect(() => { // '/api' $get('/api/user/config_name').then(res => { console.log(res) }).catch((err) => { console.log(err) }) // '/2api' $get('/2api/user/config_name').then(res => { console.log(res) }).catch((err) => { console.log(err) }) // '/3api/' $get('/3api/user/config_name').then(res => { console.log(res) }).catch((err) => { console.log(err) }) // '/4api/' $get('/4api/user/config_name').then(res => { console.log(res) }).catch((err) => { console.log(err) }) }, [])