1. 程式人生 > >由一個“兩次請求”引出的Web伺服器跨域請求訪問問題的解決方案

由一個“兩次請求”引出的Web伺服器跨域請求訪問問題的解決方案

我們公司的專案都是前後端分離的,上線幾個月以來,發現一個很奇怪的問題,每次前端發起請求,通過瀏覽器的開發者工具都能看到在Network下同一個url有兩條請求,第一條請求的Method為OPTIONS,第二條請求的Method才是真正的GET或者POST,並且,第一條請求無資料返回,第二條請求才會返回正常的資料。

發現這個問題之後,立即組織搜尋問題產生的原因以及解決方案。在網上搜索了大量資料,得到的一個結論是:第一個OPTIONS的請求是由Web伺服器處理跨域訪問引發的。網上資料顯示,OPTIONS是一種“預檢請求”,瀏覽器在處理跨域訪問的請求時如果判斷請求為複雜請求,則會先向伺服器傳送一條預檢請求,根據伺服器返回的內容瀏覽器判斷伺服器是否允許該請求訪問。如果web伺服器採用cors的方式支援跨域訪問,在處理複雜請求時這個預檢請求是不可避免的。

查詢程式碼發現,我們的web伺服器確實採用的是cors來解決跨域訪問的問題,並且我們在header中添加了自定義引數,導致我們的每次請求都為複雜請求,從而產生了每次請求都會發送兩條請求的現象。

問題的原因找到了,就要想辦法解決這個問題。既然瀏覽器在處理複雜請求時,不可避免的要傳送預檢請求,那麼能否減少預檢請求的次數呢?比如,預檢一次設定一個有效期,在有效期內不再重複預檢。順著這個思路,繼續搜尋相關資料,最終發現設定Access-Control-Max-Age這個引數即可達到預期目標。該引數用來指定本次預檢請求的有效期,單位為秒。在伺服器上設定該引數之後,問題解決了,大快人心!!!

參考資料:http://blog.csdn.net/charleslei/article/details/51906635