react 16.2 配置多个proxy，解决axios请求跨域问题

react 16.2的代理配置是在package.json中配置的,如下:

"proxy": {
    "/web": {
      "target": "http://0.0.0.0:9000",
      "changeOrigin": true,
      "pathRewrite": {
        "^/web": "/web"
      }
    },
    "/wxapp": {
      "target": "http://0.0.0.0:0",
      "changeOrigin": true,
      "pathRewrite": {
        "^/wxapp": "/wxapp"
      }
    },
    "/file": {
      "target": "http://0.0.0.0:9000",
      "changeOrigin": true,
      "pathRewrite": {
        "^/file": "/file"
      }
    },
    "/web/node": {
      "target": "http://0.0.0.0:9000",
      "changeOrigin": true,
      "pathRewrite": {
        "^/web/node": "/"
      }
    }
  },

其中:

target:  //接口请求的地址
pathRewrite: {  // 接口重定向

'^/api': 'api'

}, 

changeOrigin: true,  //控制服务器收到的响应头中Host字段的值

secure: false, // 是否验证证书

ws: true, // 启用websocket

主要关注pathRewrite哦~一般咱们前端收到的接口,多数会以‘api’或者 'web' 类似于这样的开头,但有例外的,取了别的名称的,,这里主要是看咱们收到的接口是以什么名称的来配置.如果没有,可以这么写:

pathRewrite: {  // 接口重定向

'^/api': ' '

},