前後端通訊 CORS(支援跨域)

2022-05-04 23:33:08 字數 4101 閱讀 3576

根據前端跨域的那些事這篇文章中的跨域的理解這一塊,我們重新建立兩個服務,第乙個服務使用了test.html

test.html中使用fetch來傳送請求,並且設定了乙個自定義的請求頭'x-test-cors': '123'

測試body

第二個服務,還是設定了'access-control-allow-origin': '*'允許所有網域名稱下的請求

啟動兩個服務,請求訪問第乙個服務中的test.html,test.html傳送了乙個請求執行結果看到,報錯了,在跨域請求中加了自定義的請求頭是不允許的(jsonp請求沒法設定自定義請求頭),其實請求是傳送成功了的,並且也有資料返回只是瀏覽器因為安全策略將返回的資料攔截掉了

這時候就要用到cors的預請求,在cors中有一些限制,如下

在跨域的情況下,允許的請求方法只有:get,head, post,這三個方法不需要預請求驗證,其它的請求方法預設都是不允許的,瀏覽器要有乙個預請求的方式去驗證,驗證通過之後才能傳送請求

在跨域的情況下,自定義請求頭也會被限制,需要預請求去驗證,驗證通過之後才能傳送請求

如果我們要允許自定義的請求頭在請求裡傳送,那麼我們需要返回乙個新的請求頭來告訴瀏覽器我們這個自定義的請求頭是允許的,在第二個服務中設定返回的新的請求頭

執行結果顯示,比之前多乙個請求,第乙個其實就是瀏覽器驗證的乙個請求,第二個才是實際傳送的請求

同樣請求方法和content-type也是可以設定的,沒設定之前我們使用put的請求方式來請求是會報錯的

測試body

設定之後,就可以使用put方式去請求了,執行結果可以看到第二個實際的請求put成功的

還有乙個設定就是:access-control-max-age:1000,表示執行這種跨域的請求在第乙個預請求驗證通過後,1000秒之內第二次請求的時候不需要傳送預請求了,可以直接傳送實際的請求(也就是上面說的第二個實際的請求)

執行結果可以看到,當我第乙個傳送請求的時候是需要預請求驗證的,當我重新整理頁面再次請求的時候,就已經不需要預請求驗證了

前後端分離 跨域問題 CORS

1 cors是乙個w3c標準,全稱是 跨域資源共享 cross origin resource sharing 它允許瀏覽器向跨源 協議 網域名稱 埠 伺服器,發出xmlhttprequest請求,從而克服了ajax只能同源使用的限制。cors需要瀏覽器和伺服器同時支援。它的通訊過程,都是瀏覽器自動...

關於前後端分離中CORS跨域問題

在前後端分離中,前端的域或埠與後端的域或埠不一致的情況下,瀏覽器缺省會阻止前端請求後端,因此我們為了使前端請求能夠得到伺服器響應並返回資料,需要做一些設定。configuration public class myconfig implements webmvcconfigurer cors設定,任...

CORS跨域與前後端聯調思路

允許所有源來跨域 cors origin allow all true 或者設定跨域請求白名單 允許攜帶cookie cors allow credentals true寫完檢視函式,使用postman進行介面測試,保證後端介面沒有問題 在vue中寫頁面,向後端傳送資料 後端模板 前端模板請參考ax...