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

news2024/12/31 5:33:37

一、 `package.json` 配置方式

全部以 GET 请求为例，每次修改配置后，重启项目，否则不生效。
```
访问 http://127.0.0.1:6000/api/user/list 接口为例
```
检查自己脚手架版本
```
$ create-react-app -V
```

若脚手架版本在 2.0 以下，可以使用对象类型配置代理，在项目的 package.json 文件中配置如下：

"proxy": {
  "/api": {
    "target": "http://127.0.0.1:6000/api", # 跨域地址
    "changeOrigin": true,              # 是否允许跨域
    "pathRewrite": {                   # 重写路径
      "^/api": ""
    }
  }
}

举例: 配置好后，按代理标识访问

useEffect(() => { 
  $get('/api/user/list').then(res => {
    console.log(res)
  }).catch((err) => {
    console.log(err)
  })
}, [])

若脚手架版本在 2.0 以上，只能配置 string 类型

"proxy": "http://127.0.0.1:6000"

举例: 配置好之后可以直接访问

// 方式一：不带域名，直接接口地址即可
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，如果没有手动安装下：
```
# yarn
$ yarn add http-proxy-middleware

# npm
$ npm i http-proxy-middleware
```
在 src 中，新建 setupProxy.js（文件名固定，不可自定义，react 脚手架会识别），在文件中写以下配置内容（新项目都是推荐使用高版本，不然可能会无法启动项目）。
```
文件路径: /src/setupProxy.js
```

http-proxy-middleware（1.0 以后）：

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 以前，老版本）：

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 命令的作用，文章底部。
执行解包命令，如果已经解包，忽略。
```
$ npm run eject
```
找到 webpack 代理相关配置，在 /config/webpackDevServer.config.js 文件中搜索 proxy。

将 proxy 修改为

proxy: {
  '/api': {
    target: 'http://127.0.0.1:6000/api',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }
  // 更多代理配置
},

四、自定义 `webpack` 配置文件方式

这种就不写了，写个 demo 麻烦，比如用最新版本的 webpack 搭建一个 React 项目，脚手架可能还不支持，或者手痒想全部走自定义的 webpack 配置，这个时候就需要单独 webpack 各个环境的配置文件，然后修改 package.json 中的执行命令，走自定义的 webpack 配置文件。

土、上面几种代理配置方式，配置后的使用案例代码

案例代码

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