解決在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預(yù)請求。

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

您可能感興趣的文章:

相關(guān)文章

vue3+element-plus?Dialog對話框的使用與setup?寫法的用法
這篇文章主要介紹了vue3+element-plus?Dialog對話框的使用?與?setup?寫法的使用,本文通過兩種方式結(jié)合實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-04-04
解決vue數(shù)據(jù)更新但table內(nèi)容不更新的問題
這篇文章主要給大家介紹了vue數(shù)據(jù)更新table內(nèi)容不更新解決方法,文中有詳細的代碼示例供大家作為參考,感興趣的同學(xué)可以參考閱讀一下
2023-08-08
VUE跨域詳解以及常用解決跨域的方法
跨域指瀏覽器不允許當前頁面的所在的源去請求另一個源的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于VUE跨域詳解以及常用解決跨域的方法,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
2022-07-07
vue?codemirror實現(xiàn)在線代碼編譯器效果
這篇文章主要介紹了vue-codemirror實現(xiàn)在線代碼編譯器?,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-12-12
vue2之簡易的pc端短信驗證碼的問題及處理方法
這篇文章主要介紹了vue2之簡易的pc端短信驗證碼的問題,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-06-06
分分鐘學(xué)會vue中vuex的應(yīng)用（入門教程）
本篇文章主要介紹了vue中vuex的應(yīng)用（入門教程），詳細的介紹了vuex.js和應(yīng)用方法，有興趣的可以了解一下
2017-09-09
Vue手機號正則匹配姓名加密展示功能的實現(xiàn)
這篇文章主要介紹了Vue手機號正則匹配，姓名加密展示,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-08-08
vue實現(xiàn)上傳圖片添加水印(升級版)
這篇文章主要為大家詳細介紹了vue實現(xiàn)上傳圖片添加水印的升級版，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
解決Antd Table組件表頭不對齊的問題
這篇文章主要介紹了解決Antd Table組件表頭不對齊的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
在IDEA中安裝vue插件全過程
這篇文章主要介紹了在IDEA中安裝vue插件全過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-04-04