快捷導(dǎo)航

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

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

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

我們?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跨域分為簡單跨域請(qǐng)求和復(fù)雜跨域請(qǐng)求；

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

1.簡單跨域滿足的條件

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.可以通過跟后端協(xié)調(diào)，將所有options放行，此時(shí)便能通過post/get請(qǐng)求訪問到數(shù)據(jù)。

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

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

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

1.安裝qs