vue-resource2.0已經不再更新,所以vue2.0官方推薦使用axios來代替。
實際項目也是應用上了vue+axios,然后就有了這么一段填坑的經歷。
問題:axios使用post請求時,發送了兩次,而get則正常。
第一次請求不是正確的post請求,第二次才是正確的
調出谷歌開發者工具
“Request Method: OPTIONS”
什么鬼,post請求時,這里的“Request Method”居然不是post,而是這個OPTIONS。注意:它還是額外發送的。
項目中采用前后端分離的開發方式,前端通過調用后端API實現數據傳輸。
后端同學則通過反向代理解決了前端跨域的問題。(前端調接口跟在同域下使用時一樣,該怎么用怎么用)
找到原因:其實這個情況並非bug,而是當項目中有用到跨域請求時,除了get方式的http請求,都會發送一個預檢請求。
跨域資源共享標准新增了一組 HTTP 首部字段,允許服務器聲明哪些源站有權限訪問哪些資源。另外,規范要求,對那些可能對服務器數據產生副作用的 HTTP 請求方法(特別是 GET 以外的 HTTP 請求,或者搭配某些 MIME 類型的 POST 請求),瀏覽器必須首先使用 OPTIONS 方法發起一個預檢請求(preflight request),從而獲知服務端是否允許該跨域請求。服務器確認允許之后,才發起實際的 HTTP 請求。在預檢請求的返回中,服務器端也可以通知客戶端,是否需要攜帶身份憑證(包括 Cookies 和 HTTP 認證相關數據)。
相關資料https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_C
解決方案:只能麻煩后端同學幫忙處理下
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'){
exit;
}
后端遇到請求方式是“Request Method: OPTIONS” 時,直接返回或退出即可,不再往下執行程序。
上述header的設置用的是PHP的設置方法,在Web服務器端,如nginx, apache也可以對header進行設定。
