【疑惑破解】—— react使用http-proxy-middleware反向代理跨域

create-react-app腳手架低於2.0版本時候，可以使用對象類型

"proxy": {
    "/api": {
      "target": "http://localhost:5000",
      "changeOrigin": true
    }
}

最新的create-react-app腳手架2.0版本以上只能配置string類型

"proxy": "http://localhost:5000"

官網給了新的使用方式，在src下新建文件setupProxy.js加下面代碼，無需單獨應用，webpack會自動引入文件。　

注意：1. 用typescript文件名結尾.ts會導致文件不生效！！！切記.js文件結尾

　　     2.  package.json內容發生了修改，必須重啟應用，才能生效。

 

第一步 安裝 http-proxy-middleware

npm install http-proxy-middleware　　

順便安裝一下 axios ，不用也可以，用fetch也一樣。

npm install axios

　　

第二步 npm run eject 命令 配置暴露出來

npm run eject 
or
yarn eject

　　

第三步 src下創建一個 setupProxy.js文件

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

// console.log(1);
module.exports = function(app) {
      app.use(
           proxy("/api", {
                 target: "http://m.kugou.com?json=true",
                 changeOrigin: true
           })
      );
      // app.use(
         // proxy("/fans/**", {
                 // target: "https://easy-mock.com/mock/5c0f31837214cf627b8d43f0/",
                 // changeOrigin: true
         // })
     // );
};   

　

 

第四步 需要發送請求的地方 使用

async componentDidMount(){
     let data = await axios.get('/api?json=true');
     let {data:{data:d,banner}} = data;

     let arr = [...banner,...banner];
     this.setState({
          iw:this.refs.banner.offsetWidth,
          arr,
          data:d
     });
}

---

 注：轉載自鄉村里的一股清流博客