解決前後端調用,跨域二次請求Access-Control-Max-Age

發現前後端分離的項目中,前端發起一個請求到後端,在Chrome瀏覽器下面debug的時候,Network下面看到同一個url有兩條請求,url有兩條請求,第一條請求的Method爲OPTIONS,第二條請求的Method纔是真正的Get或者Post,並且,第一條請求無數據返回,第二條請求才返回正常的數據,我們的整個後臺解決跨域問題是用CORS實現的,後來查資料發現原因:

第一個OPTIONS的請求是由WEB服務器處理跨域訪問引發的。OPTIONS是一種預檢請求,瀏覽器在處理跨域訪問的請求時,如果判斷請求爲複雜請求,則會先向服務器發送一條預檢請求,根據服務器返回的內容,瀏覽器判斷服務器是否允許訪問該請求。如果WEB服務器採用CORS的方式支持跨域訪問,在處理複雜請求時這個預檢請求是不可避免的。

由於我們的WEB服務器採用CORS來解決跨域訪問的問題,同時在header中添加了自定義參數以及使用json格式來進行數據交互,導致我們的每次請求都是複雜請求,從而產生每次請求都會發送兩條請求的現象。

產生原因如下:

使用CORS解決跨域問題

解決方案:
配置Nginx, 加入”Access-Control-Max-Age”,用來指定本次預檢請求的有效期,單位爲秒。上面結果中,有效期是20天(1728000秒),即允許緩存該條迴應1728000秒(即20天),在此期間,不用發出另一條預檢請求

location /wechat/ {
add_header ‘Access-Control-Max-Age’ 1728000;
proxy_pass http://wechat/rest/;
}

在nginx下面加入Access-Control-Max-Age,如果你的Chrome瀏覽器在debug狀態,勾選上Disable cache,也是失效的
---------------------
作者:Java-Basketball
來源:CSDN
原文:https://blog.csdn.net/superdangbo/article/details/82685694
版權聲明:本文爲博主原創文章,轉載請附上博文鏈接!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章