最近在做乙個**網 freemusic
因為這個專案採用的是vue
框架 +axios
進行http
請求,所以結合vue
+axios
進行跨域處理,先說說在伺服器端設定跨域處理:
header(「access-control-allow-origin:*」);
header(「access-control-allow-headers:content-type」);
header(「access-control-request-method:get,post」);
伺服器端設定跨域主要在於對請求頭進行訪問控制即可,很顯然對於我本次訪問的api
是酷狗**的,我們無法操作伺服器端。
結合vue
裡面的配置檔案可以自己設定乙個**伺服器,使用proxytable
進行配置,同時還可以配置本地api
,在config/index.js
裡面找到proxytable: {}
, 然後在裡面進行如下配置:
proxytable:
},"/api":
}}
/kugouapi
可自定義命名,target
設定你將要呼叫的介面網域名稱和埠號,changeorigin
將主機頭的原點更改為目標url,所以要設為true
,pathrewrite
路徑重寫,即可直接使用/kugouapi
代替target
裡面的介面。如果要設定多個**,同理直接在後面繼續新增,注意這裡設定了多個**,axios.defaults.baseurl
就不能在設定了。
使用:=>
/kugouapi/?json=true
this.axios.get('/kugouapi/?json=true').then(res=>).catch(err=>{})
還可以在main.js
中將**掛載到vue
的原型上
vue.prototype.host = '/api'
請求的時候只需要使用this.host
+ 「路由引數位址」 即可
Vue使用axios跨域請求
首先說axios跨域的問題,使用vue必然要請求api介面獲得資料,那麼跨域的問題也隨之而來,你總會碰到的。下面針對解決使用axios請求 服務端,返回 access control allow 和 405 method not allowed http訪問控制 cors 強烈建議仔細閱讀 下面根據...
vue前端處理跨域問題 axios
main.js 在main.js檔案中引入axios import vue from vue step1 引入 axios import axios from axios vue.config.productiontip false step2 把axios掛載到vue的原型中,在vue中每個元件都...
axios處理跨域問題
import axios from axios vue.use elementui vue.prototype.axios axios 把axios掛載到vue的原型中 在vue中的每個元件都可以使用axios傳送請求 重要在於這裡 vue.prototype.home awsomepos 是乙個定...