React配置代理proxy(實現跨域請求)

最近有不少夥伴詢問react的代理配置，自己也去試驗了一下發現不少的坑，在這就將所遇到的坑和心得分享出來，希望能幫到更多的夥伴，避免踩坑。

1、 直接在package.json中設置proxy屬性

這個是在用create-react-app腳手架搭建的react項目中的，可以直接在package.json中配置proxy：
有些文章裏會提示以下方式

  "proxy": {
    "/api/**": {
      "target": "http://172.16.136.249:8080",
      "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.
error Command failed with exit code 1.

這是因爲在新版本的react項目中，在package.json中的proxy只能設置成字符串，如下

	"proxy": "http://172.16.136.249:8080"

配置後運行項目

yarn start
或
npm run start

由於package.json中，只能給proxy設置字符串；因此，這樣的方式就導致，設置的代理只能配置一個，想要配置多個代理就不行了。
想要配置多的代理，請往下看

2、通過middleware中間件的方式設置proxy

在項目中安裝middleware

yarn add http-proxy-middleware --save
或
npm install http-proxy-middleware --save

安裝middleware插件後，在src目錄中新建setupProxy.js文件，在文件中放入如下代碼：

const { createProxyMiddleware } = require('http-proxy-middleware')

module.exports = function (app) {
  app.use(createProxyMiddleware('/api', {
    target: 'http://172.16.136.249:8080',
    secure: false,
    changeOrigin: true,
    pathRewrite: {
      "^/api": "/api"
    }
  }))
}

然後運行項目

yarn start
或
npm run start

注意坑點
在有寫文章會用proxy方式取值：

const { proxy } = require('http-proxy-middleware')
// 或
// const proxy = require('http-proxy-middleware')

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

這的運行項目會報錯，也是在糾結了很長時間後，在npm的網站中找到了http-proxy-middleware的設置方式：

這樣就可以了
配置代理後的數據請求
這個交易的原url爲/getdata，因爲配置的代理增加了/api，就成了/api/getdata。

axios.post('/api/getdata')
      .then((res) => {
        console.log('獲取數據', res)
      })
      .catch(err => {
        console.log('數據請求失敗', err)
      })

3、最後還想說下配置服務器代理或後端的core方式來進行跨域聯調

配置代理就不用說了，Nginx的反向代理是除了名的優秀。
下邊給出在node中的一種設置cors的方式，利用cors的中間件

1、在node的項目中安裝cors的中間件

yarn add cors --save
或
npm install cors --save

2、 這個例子在express項目中，下邊就給出在項目中的配置

const cors = require('cors');

app.use(cors({
  origin: ['http://172.16.136.249:3000'],
  methods: ['GET', 'POST'],
  alloweHeaders: ['Conten-Type', 'Authorization']
}));

整體來看服務端配置跨域還是很方便的

本文引用： https://www.npmjs.com/package/http-proxy-middleware