Axios 執行post傳送兩次請求的小坑

2022-03-07 05:13:37 字數 1260 閱讀 8192

vue-resource2.0已經不再更新,所以vue2.0官方推薦使用axios來代替。

實際專案也是應用上了vue+axios,然後就有了這麼一段填坑的經歷。

問題:axios使用post請求時,傳送了兩次,而get則正常。

第一次請求不是正確的post請求,第二次才是正確的

調出谷歌開發者工具

什麼鬼,post請求時,這裡的「request method」居然不是post,而是這個options。注意:它還是額外傳送的。

專案中採用前後端分離的開發方式,前端通過呼叫後端api實現資料傳輸。

後端同學則通過反向**解決了前端跨域的問題。(前端調介面跟在同域下使用時一樣,該怎麼用怎麼用)

找到原因:其實這個情況並非bug,而是當專案中有用到跨域請求時,除了get方式的http請求,都會傳送乙個預檢請求。

跨域資源共享標準新增了一組 http 首部字段,允許伺服器宣告哪些源站有許可權訪問哪些資源。另外,規範要求,對那些可能對伺服器資料產生***的 http 請求方法(特別是 get 以外的 http 請求,或者搭配某些 mime 型別的 post 請求),瀏覽器必須首先使用 options 方法發起乙個預檢請求(preflight request),從而獲知服務端是否允許該跨域請求。伺服器確認允許之後,才發起實際的 http 請求。在預檢請求的返回中,伺服器端也可以通知客戶端,是否需要攜帶身份憑證(包括 cookies 和 http 認證相關資料)。

相關資料

解決方案:只能麻煩後端同學幫忙處理下

header("access-control-allow-origin:*");

header("access-control-allow-headers:content-type");

header("access-control-request-method:get,post");

if(strtoupper($_server['request_method'])== 'options')

後端遇到請求方式是「request method: options」 時,直接返回或退出即可,不再往下執行程式。

上述header的設定用的是php的設定方法,在web伺服器端,如nginx, apache也可以對header進行設定。

QuartzJOb執行兩次

這個文章寫的不錯 抄襲第一種解決方案 tomcat啟動載入問題 unpackwars true autodeploy true 專案訪問的時候將工程名字去掉,增加了乙個配置contant path,最終採用這種方案 unpackwars true autodeploy false deployons...

Jquery 事件執行兩次

阻止冒泡的方法並不止 return false 這一種,還有event.stoppropagation 這兩種方法是有區別的,簡單來說 event.stoppropagation 會阻止事件往上冒泡,但是並不阻止事件本身 return false 則是既阻止了事件往上冒泡又阻止了事件本身。修改前 p...

執行兩次md5

密碼明文傳遞或者直接寫到資料庫中,都有被偷看的風險 現在存在的一些反查md5的軟體,做兩次為了更好的保密 整體加密流程 md5 md5 pass明文 固定salt 隨機salt 第一次固定salt寫死在前端 第二次加密採用隨機的salt 並將每次生成的salt儲存在資料庫中 登入流程 前端對使用者輸...