React Proxy 详细流程与配置方式（webpack、setupProxy.js、package.json）

一、 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) }) }, [])