在create-react-app之前的版本，我們配置http請求跨域是直接在package.json配置即可，如下圖：

但在最新的create-react-app v2升級版(webpack4.0)中，如果proxy不是字符串，並不能這麽在 package.json直接配置，會報錯！

通過查閱create-react-app的官方文檔https://facebook.github.io/create-react-app/docs/getting-started，找到了如下的解決方案。

1）：安裝http-proxy-middleware管理包，cnpm http-proxy-middleware --save

　 2）：在項目目錄src/下新建setupProxy.js文件，然後寫入如下代碼:

const proxy = require(‘http-proxy-middleware‘);

module.exports = function(app) {
  app.use(proxy(‘/api‘, { 
       target: ‘http://192.168.1.144:8181‘ ,
       secure: false,
       changeOrigin: true,
       pathRewrite: {
        "^/api": "/"
       },
       
 
// cookieDomainRewrite: "http://localhost:3000"
    }));
};

3): 在組件中使用axios測試http請求是否成功

   componentDidMount() {
        axios({
            url: "/api/dataServicePlatform/data/platform?method=select&serviceId=xhly_ChaSight&backtype=json",
            method: "get"
        }).then(res => {
            console.log(res);
        })
    }
 

4): 瀏覽器中成功拿到後端的數據

新版react16.6中 create-react-app升級版(webpack4.0) 配置http請求跨域問題