vue 使用 axios 跨域處理

2021-09-27 02:00:43 字數 1264 閱讀 7123

最近在做乙個**網 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,所以要設為truepathrewrite路徑重寫,即可直接使用/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 是乙個定...