今天做跨域登錄功能遇到這個(gè)問題(后端已做跨域處理)：
當(dāng)跨域請(qǐng)求為post時(shí)候，請(qǐng)求的method變?yōu)榱薿ptions。
在這里插入圖片描述
其實(shí)跨域分為 簡單跨域請(qǐng)求和復(fù)雜跨域請(qǐng)求：
簡單跨域請(qǐng)求是不會(huì)發(fā)送options請(qǐng)求的
復(fù)雜跨域請(qǐng)求會(huì)發(fā)送一個(gè)預(yù)檢請(qǐng)求options
復(fù)雜跨域請(qǐng)求要滿足以下：
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字段

參考鏈接

axios默認(rèn)設(shè)置的[‘Content-Type’]是application/json，會(huì)引發(fā)復(fù)雜跨域請(qǐng)求，就是所謂的method為options的現(xiàn)象，此階段為預(yù)請(qǐng)求 階段，此階段通過后才會(huì)發(fā)送正式的post請(qǐng)求。
其中引入qs模塊是為了解析瀏覽器把參數(shù)當(dāng)作字符串請(qǐng)求數(shù)據(jù)，導(dǎo)致請(qǐng)求參數(shù)無法傳遞到后臺(tái)。
觀察瀏覽器network發(fā)現(xiàn)兩種方法最后的效果都是將Content-Type都變成了application/x-www-form-urlencoded
解決方法：

// request攔截器
service.interceptors.request.use(
config => {
------------解決方法--------------------------------------------------
config.headers[‘Content-Type’] = ‘a(chǎn)pplication/x-www-form-urlencoded’
if (config.method === ‘post’) {
config.data = qs.stringify({
…config.data
})
}
--------------------------------------------------------------
if (store.getters.token) { // 設(shè)置全局參數(shù)uid，keyid
// config.headers[‘X-Token’] = getToken() // 讓每個(gè)請(qǐng)求攜帶自定義token 請(qǐng)根據(jù)實(shí)際情況自行修改

if (config.method === 'post') { // 2019/4/10 by zzqconst data = qs.parse(config.data)config.data = qs.stringify({keyid: 'keyid',uid: 'uid',...data})}if (config.method === 'get') { // 2019/4/10 by zzzqconfig.params = {...config.params,keyid: 'keyid',uid: 'uid'}} } return config

},
error => {
// Do something with request error
console.log(error) // for debug
Promise.reject(error)
}
)
————————————————
版權(quán)聲明：本文為CSDN博主「Homer_Simpson」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/Homer_Simpson/article/details/89188068

總結(jié)

以上是生活随笔為你收集整理的vue axios跨域 Request Method: OPTIONS问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。