React跨域-react里配置接口跨域代理，實現axios跨域請求【親測完美實現～】

這種問題當然離不了官網媽媽的支持：傳送門

 

官網給了三種解決方案。前兩種我就不贅述了（主要是因為我沒用）

而官網的第三種推薦的方式：

1、安裝依賴：

$ npm install http-proxy-middleware --save
$ # or
$ yarn add http-proxy-middleware

 

2、在“src”文件夾下新建“setupProxy.js”文件。並做官網推薦的配置～

理論上，在正確的路徑下新建setupProxy.js完畢，你只需要把下邊這段官網的代碼抄過來就可以了：

 一切是那么的完美～

 

 

我們都知道，配置完后要重啟代碼。

不過，隨着代碼逐漸構建完畢，我的笑臉也漸漸凝固了：：：

 

黑紅黑紅的報錯，看着就鬧心！！！

“proxy is not a funciton” ??? 逗我呢???

 

 

擦干眼淚細細品，proxy從依賴中引入的，執行函數調用后卻說他不是個function。

那么真相就只有這么幾個（突然發現程序員也適合當偵探啊，都需要邏輯推理能力～）：

　　1、要么proxy引入依賴不成功【沒報模塊引入錯誤，所以排除】

　　    原因1是依賴根本沒安裝

　　    原因2是安裝了，但是引入路徑不對

　　2、要么proxy真的不是個函數，而是其他數據類型。

 

打印proxy，發現真的不是函數。而是一個對象：

 

可能是官網demo寫的早，proxy這個插件經過了修改？那咱也改！

 

一頓操作、代碼改成這樣：

既然導出的對象里createProxyMiddleware是個函數，那就用這個函數調用不就得了。

黑貓白貓，抓住老鼠就是個好貓！

再次運行，果然不報這個錯了。

 

但是運行頁面，報代理的地址404。

於是我們繼續將代碼修改如下：

1、代理處修改

const proxy = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    '/api',
    proxy.createProxyMiddleware({
      target: 'https://api.seniverse.com/',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    })
  );
};

加了第8-10行。這個“pathRewrite”網上有很多教程，直接百度這個關鍵詞即可。

 

 

2、接口地址修改(urls.js)

export default {
  my_application_list: '/api/myApplication/lujing?name=哈哈哈，注意前邊的斜杠api啊'
}

⚠️這里注意地址前邊能被正則匹配到的"/api"關鍵字，才會被重命名為“https://api.seniverse.com/”。

也就是才能代理、注意一定要寫哦！

 

3、最后，接口請求即可：

import axios from 'axios'
import urls from "../apis/urls";

... ...

componentDidMount(){
    axios.get(urls.my_application_list)
    .then(function (response) {
      console.log(response)
    })
    .catch(function (error) {
      console.log(error);
    })
 }

 

這次是真的完美實現react中的跨域代理了～

 

2020-02-22  00:55:00

配置源代碼地址：https://github.com/xingorg1/JuFengGuo/blob/master/advanceCourse/react/react-jianshu/src/setupProxy.js

應用源代碼地址：https://github.com/xingorg1/JuFengGuo/blob/master/advanceCourse/react/react-jianshu/src/components/DemoUI/DemoUI.js#L15