解決在Vue中使用axios POST請求變成OPTIONS的問題

更新時間：2020年08月14日 11:55:16 作者：小破孩呦

這篇文章主要介紹了解決在Vue中使用axios POST請求變成OPTIONS的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

POST請求變成OPTIONS

及報錯信息（跨域）

主要解決方案：使用qs.stringify

1、安裝qs

npm install qs --save

2、axios配置和使用

在接口請求頁面引入安裝好的qs，如下圖：

引入完成之后使用qs改變傳遞的參數(shù)data，如下：

這樣就可以了，post請求的時候就不會再出現(xiàn)OPTIONS了

補充知識：axios發(fā)起請求，為什么先發(fā)送options請求，再發(fā)送get/post請求

引起原因

1，跨域；

2，請求頭非默認情況。

默認請求頭如下

Accept
Accept-Language
Content-Language
Last-Event-ID

Content-Type：只限于三個值application/x-www-form-urlencoded、multipart/form-data、text/plain

通常情況下，會將content-Type:application/json;

axios中content-Type默認是application/json;所以在使用axios跨域發(fā)請求時，會觸發(fā)options預請求。

以上這篇解決在Vue中使用axios POST請求變成OPTIONS的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vuex 中插件的編寫案例解析
Vuex 的 store 接受 plugins 選項，這個選項暴露出每次 mutation 的鉤子。Vuex 插件就是一個函數(shù)，這篇文章主要介紹了vuex 中插件的編寫案例,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-06-06
vue使用節(jié)流函數(shù)的踩坑實例指南
防抖和節(jié)流的目的都是為了減少不必要的計算，下面這篇文章主要給大家介紹了關于vue使用節(jié)流函數(shù)踩坑的相關資料,需要的朋友可以參考下
2021-05-05
Vue實現(xiàn)表格合并與拆分的示例代碼
在Vue應用程序中，表格是一個非常常見的組件，在這篇文章中，我們將介紹如何在Vue中進行表格的合并和拆分，感興趣的小伙伴可以了解一下
2023-06-06
如何解決element-ui動態(tài)加載級聯(lián)選擇器默認選中問題
這篇文章主要介紹了如何解決element-ui動態(tài)加載級聯(lián)選擇器默認選中問題，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下
2022-09-09
詳解vue 數(shù)組和對象渲染問題
這篇文章主要介紹了詳解vue 數(shù)組和對象渲染問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09
vue.config.js文件devServer字段的常用選項詳解
在?Vue?CLI?生成的?vue.config.js?文件中,devServer?字段用于配置開發(fā)服務器的選項,本文給大家介紹vue.config.js文件devServer字段的常用選項,感興趣的朋友一起看看吧
2023-11-11
vuex結合session存儲數(shù)據(jù)解決頁面刷新數(shù)據(jù)丟失問題
在項目中表單篩選項里，選擇完之后刷新頁面數(shù)據(jù)就變了，沒有保留在自己選擇的選項上。本文使用session存儲數(shù)據(jù)，具有一定的參考價值，感興趣的可以了解一下
2021-09-09
vue項目ElementUI組件中el-upload組件與圖片裁剪功能組件結合使用詳解
這篇文章主要介紹了vue項目ElementUI組件中el-upload組件與圖片裁剪功能組件結合使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
vue登錄成功之后的token處理詳細步驟
Token是身份驗證后服務端返回的令牌,常用于訪問授權API和頁面權限校驗,Token數(shù)據(jù)可存儲在本地或Vuex中,本地存儲可實現(xiàn)數(shù)據(jù)持久化,這篇文章主要介紹了vue登錄成功之后的token處理詳細步驟,需要的朋友可以參考下
2024-10-10
vue如何使用HMAC-SHA256簽名算法
這篇文章主要介紹了vue使用HMAC-SHA256簽名算法的相關知識,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
2024-07-07