CORS跨域問題(前端處理)


方法一.

后台:配置access-control-allow-origin:*,

前端:不用做任何操作,即可訪問

問題:前端請求頭不會帶上cookie,后台無法獲取當前會話id(sesseionId)

方法二.

前端:請求配置withcreadential:true

eg:1/axios: axios.defaults.withCredentials = true

  2、ajax:$.ajax({ url: 'xxx', type: 'put', xhrFields: { withCredentials: true }, crossDomain: true });

后台:對請求進行CORS處理:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

方法三:

前端:配置代理(服務器請求服務器不會導致跨域)無論vue、react都需自行配置代理(因為代理到要去訪問的服務器不同)

后台:不用處理

問題:本地訪問沒問題,但是如果前端、后台代碼部署到不同的服務器上此方法不可行,應改為第二種方法。

 

 

 

ps:針對方法二進行詳細講解

 

 

 

 

 注:滿足以上條件會觸發瀏覽器預檢請求(與前述簡單請求不同,“需預檢的請求”要求必須首先使用 OPTIONS   方法發起一個預檢請求到服務器,以獲知服務器是否允許該實際請求。"預檢請求“的使用,可以避免跨域請求對服務器的用戶數據產生未預期的影響。);

注:后台可根據以上方式設置,及遵循CROS完成對瀏覽器option進行處理,返回200,才能讓瀏覽器以想要的method進行請求。

預檢請求瀏覽器響應頭如下:

 

瀏覽器預檢請求通過后,用想要的method去請求的響應頭如下:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM