快捷導(dǎo)航

解決vue axios跨域 Request Method: OPTIONS問(wèn)題(預(yù)檢請(qǐng)求)

更新時(shí)間：2020年08月14日 14:30:15 作者：曲昶光

這篇文章主要介紹了解決vue axios跨域 Request Method: OPTIONS問(wèn)題(預(yù)檢請(qǐng)求)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

我們?cè)趘ue開發(fā)中用axios進(jìn)行跨域請(qǐng)求時(shí)有時(shí)會(huì)遇到，同一個(gè)接口請(qǐng)求了兩次，并且第一次都是options請(qǐng)求，然后才是post/get請(qǐng)求

如下圖

options請(qǐng)求

get請(qǐng)求

為什么會(huì)出現(xiàn)這種原因呢？

這是因?yàn)镃ORS跨域分為簡(jiǎn)單跨域請(qǐng)求和復(fù)雜跨域請(qǐng)求；

簡(jiǎn)單跨域不會(huì)發(fā)送options請(qǐng)求，復(fù)雜跨域會(huì)發(fā)送一個(gè)預(yù)檢請(qǐng)求options。

1.簡(jiǎn)單跨域滿足的條件

1.請(qǐng)求方式是以下三種之一：

HEAD

GET

POST

2.HTTP的頭信息不超出以下幾種字段

Accept

Accept-Language

Content-Language

Last-Event-ID

Content-Type

但是Content-Type的值，只限于三個(gè)值：

application/x-www-form-urlencoded、multipart/form-data、text/plain

2.復(fù)雜跨域滿足的條件

1.請(qǐng)求方法不是GET/HEAD/POST

2. post請(qǐng)求的Content-Type并非application/x-www-form-urlencoded, multipart/form-data, 或text/plain

3.請(qǐng)求設(shè)置了自定義的header字段

在header中自定義了字段就會(huì)觸發(fā)options預(yù)檢請(qǐng)求

// 請(qǐng)求攔截器
service.interceptors.request.use(
 config => {
 if (store.getters.token) {
 config.headers['Content-MD5'] = 'MD5'
 config.headers['authToken'] = getToken()
 config.headers['accessTokenRetireTime'] = getTokenTime()
 }

 return config
 },
 error => {
 console.log(error) // for debug
 return Promise.reject(error)
 }
)

3.解決方案

1.可以通過(guò)跟后端協(xié)調(diào)，將所有options放行，此時(shí)便能通過(guò)post/get請(qǐng)求訪問(wèn)到數(shù)據(jù)。

2.引入qs模塊處理數(shù)據(jù)

qs.parse()將URL解析成對(duì)象的形式

qs.stringify()將對(duì)象序列化成URL的形式，以&進(jìn)行拼接

1.安裝qs

npm install qs

2.在main.js引入qs

import qs from 'qs';

Vue.prototype.$qs = qs;

3.vue實(shí)例組件里都可以直接用this.$qs.stringify(要處理的數(shù)據(jù))，進(jìn)行數(shù)據(jù)轉(zhuǎn)換

個(gè)人傾向第一種方法，如果用第二種方法對(duì)前后端來(lái)說(shuō)比較繁瑣。

補(bǔ)充知識(shí)：vue當(dāng)中axios調(diào)取后臺(tái)數(shù)據(jù) 以及設(shè)置自定義請(qǐng)求頭

從vue2.0開始vue-resource就不再維護(hù)了，尤大大開始推薦使用 axios。具體詳細(xì)教程可在官網(wǎng)查閱，這篇文章主要說(shuō)明一些簡(jiǎn)單的問(wèn)題。

第一步：安裝axios

$ npm install axios

第二步：在 main.js中引入axios

第三步：設(shè)置我們自定義的頭請(qǐng)求；

header也可以在我們具體的請(qǐng)求中添加 header參數(shù)，我們這里是在main.js中添加公眾的。

axios.defaults.timeout = 5000;

//請(qǐng)求超時(shí)的時(shí)間設(shè)定

axios.defaults.headers.post['Content-Type'] = 'application/json';

//axios默認(rèn)的請(qǐng)求方式,可以自己設(shè)置

axios.defaults.baseURL = 'http://localhost:8008';

//axios默認(rèn)的請(qǐng)求地址,開發(fā)時(shí)可以實(shí)際的接口地址來(lái)設(shè)置該值,去請(qǐng)求別人的接口(前提是后臺(tái)已經(jīng)幫你解決了接口的跨域問(wèn)題,如果沒(méi)有,請(qǐng)看下文,我們自己可以解決開發(fā)跨域的問(wèn)題)