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

標籤：lan   web服務   https   view   首部   方法   tar   憑證   apt   

vue-resource2.0已經不再更新，所以vue2.0官方推薦使用axios來代替。
實際項目也是應用上了vue+axios，然後就有了這麼一段填坑的經曆。

 

問題：axios使用post請求時，發送了兩次，而get則正常。
第一次請求不是正確的post請求，第二次才是正確的

 

調出Google開發人員工具

image.png

 

“Request Method： OPTIONS”
什麼鬼，post請求時，這裡的“Request Method”居然不是post，而是這個OPTIONS。注意：它還是額外發送的。

 

項目中採用前後端分離的開發方式，前端通過調用後端API實現資料轉送。
後端同學則通過反向 Proxy解決了前端跨域的問題。（前端調介面跟在同域下使用時一樣，該怎麼用怎麼用）

 

找到原因：其實這個情況並非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進行設定。

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