Vue使用axios跨域請求

2021-08-18 13:44:50 字數 1425 閱讀 7746

首先說axios跨域的問題,使用vue必然要請求api介面獲得資料,那麼跨域的問題也隨之而來,你總會碰到的。

下面針對解決使用axios請求 服務端,返回 access-control-allow-*****  和 405 method not allowed

http訪問控制(cors)

強烈建議仔細閱讀

下面根據我的實際情況進行分析:

1、no 'access-control-allow-origin' 或者 access-control-allow-headers 或者access-control-allow-methods 之類的問題,修改server端。其實在web.config中加入3條記錄就可以。

方法一:

(*就是全部)

(這個是允許的header頭資訊)

(允許的請求方法)

方法二:

還有乙個種方法是引入.net的 cros dll。簡單說一下:

使用nuget搜尋「microsoft.aspnet.webapi.cors」

public static class webapiconfig

//",

defaults: new );}

}

我們暫定三個「*」號,當然,在專案中使用的時候一般需要指定對哪個網域名稱可以跨域、跨域的操作有哪些等等。這個在下面介紹。

需要注意的是

兩種方法不要同時使用

,使用一種即可。

2、我們再請求api的時候必然加入各種字段資訊驗證,通常就是加token。如果header裡面加入了非標準的請求的引數,這個時候你的請求會由正常的post/get請求,變成 先傳送options請求 獲得伺服器許可後,在傳送post/get。

而一般情況下,我們再編寫api介面時,get介面就只允許get請求方式來訪問,同理post只允許post請求訪問

/// /// 檢查版本更新

public httpresponsemessage checkversion(cetb_checkversionparams params)

這個時候就會發生405 method not allowed,因為你先傳送的是 options請求

只需在介面上面加上允許opions請求即可,

/// /// 檢查版本更新

axios 跨域請求 及 axios使用方式

使用axios 1 npm install axios 2 bower install axios 3 執行get請求 為給定 id 的 user 建立請求 axios.get user?id 12345 then function response catch function error 可選地...

vue 使用 axios 跨域處理

最近在做乙個 網 freemusic 因為這個專案採用的是vue框架 axios進行http請求,所以結合vue axios進行跨域處理,先說說在伺服器端設定跨域處理 header access control allow origin header access control allow hea...

vue下axios和fetch跨域請求

1.在config的index.js下面進行常用跨域配置 proxytable 2.利用axios的post方式元件內發起請求this.axios.post apis test testtoken.php then res catch err 3.這幾個axios常用設定可在封裝axios的api中...