react 添加代理 proxy

react package.json中proxy的配置如下

"proxy": {
    "/api/rjwl": {
      "target": "http://47.94.142.215:8081",
      "changeOrigin": true
    }
}

報錯：

When specified, "proxy" in package.json must be a string.
Instead, the type of "proxy" was "object".
Either remove "proxy" from package.json, or make it a string.

原因 React 的 package.json 不支持proxy是對象，只支持字符串

// 這樣可以使用
"proxy": "http://wxlive.gaing.cn",

解決辦法
安裝 http-proxy-middleware

yarn add http-proxy-middleware

在創建一個setupProxy.js文件，在src目錄，src/setupProxy.js

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

module.exports = function (app) {
    app.use(proxy('/api', {
      target: 'http://www.test.com',
      secure: false,
      changeOrigin: true,
      pathRewrite: {
        "^/api": "/api"
      }
    }))
}

完成，運行

yarn start 

作者：taoqun
地址：http://taoquns.com/paper/48