react脚手架配置代理两种方式

内容来自: 尚硅谷react视频.

package.json

1. 在package.json中配置 （3000为react 5000为要访问的【自己开启的】服务器）
   优点：配置简单 前端请求资源时可以不添加任何前缀
   缺点：不能配置多个代理
   工作方式：当请求3000不存在资源 那么请求就会转发给5000（优先匹配前端资源）

3000存在的资源为public文件中
若请求http://localhost:3000/index.html 返回的是public/index.html
getAxios = () =>{ axios.get('http://localhost:3000/index.html').then(res =>{ console.log(res.data) }) }

setupProxy.js

2. src/setupProxy.js配置
   优点：可以配置多个代理
   缺点：配置繁琐 请求路径前要加前缀

const proxy = require('http-proxy-middleware')

module.exports = function (app){
  app.use(
    proxy('/api', {
      // 配置转发目标地址（能返回数据的服务器地址）
      target: 'http://localhost:5000', 
      /**
       * 控制服务器接收到的请求头中host为：localhost:5000
       * true localhost:5000
       * false localhost:3000
       * 一般设置为true
       */
      changeOrigin: true,
      // 去除请求前缀 保证交给后台服务器的是正常的请求地址 必须配置
      pathRewrite: {'^/api': ''}
    })
  )
}