1. 程式人生 > >vue-cli(vue2.x)配置跨域請求代理,設定請求頭

vue-cli(vue2.x)配置跨域請求代理,設定請求頭

1、在config/index.js設定配置檔案,跨域配置代理

(預設裡面內容為空,我們需要加入對跨域介面的配置)
根據介面的不同設定的請求頭和主機也不同,自己按照格式要求進行配置即可。
在這裡插入圖片描述如上圖配置好了之後,'/apis/getSongLyric'為自定義的axios請求路徑,自己根據相應介面功能來命名。後面在用axios請求介面的時候,url路徑就要寫自定義的這個,那麼代理就會自動解析成對應的請求介面了。

注意:修改了配置檔案之後要重新啟動專案!

2、配置了代理之後,我們就可以使用axios來進行跨域請求受保護的介面了

一般會在額外的js檔案中,進行介面請求的引數拼接和請求傳回的資料的格式進行處理。這時候這個js檔案就需要額外引入axios(注意vue元件js程式碼塊中用的,和js檔案用的不一樣。我們在這裡直接import引入即可使用):

getData.js檔案如下圖程式碼所示:
引數的拼接:在這裡插入圖片描述axios請求介面返回資料的處理(如果需要處理的話才處理):
在這裡插入圖片描述