前端跨域請求get 跨域的原因以及解決方案

2021-10-14 10:31:42 字數 1695 閱讀 8214

瀏覽器限制,目前所有瀏覽器都實現了同源策略規範。

請求方式type為xhr。如果非xhr,如json,script則也不會存在跨域問題

請求方與服務方的源不同,即跨域,包括:

協議不同

網域名稱不同

埠不同同時滿足三個條件才有可能產生跨域問題。

對於瀏覽器限制的解決方案-關閉瀏覽器的同源策略檢查

--args--disable-web-security--user-data-dir設定瀏覽器的啟動引數,將瀏覽器的同源策略取消。該方式要求所用的使用者進行手動操作,肯定是不現實的。

請求方式type為xhr的解決方案既然只有type為xhr的請求才會存在跨域請求,那麼我們是不是可以換一種請求方式呢。jsonp的實現就是這樣。將原本type是xhr的請求偽造成script請求。jsonp的請求路徑後面會自動帶上callback引數,服務端可據此判斷是否是jsonp請求,將返回值以script的形式進行封裝。且服務端需要進行相應的改動。

對於springboot專案

@controlleradvicepublicclass jsonpadvice extends abstractjsonpresponsebodyadvice}
jquery實現jsonp的原理:

動態建立乙個script,通過這個script去請求,請求完,該script即被銷毀。可通過對jquery打斷點的方式驗證。(可以看到jquery在網頁源**嵌入了乙個臨時的script,當jsonp請求完成之後,該script即被銷毀)

3. 對於域不同的解決方案

根據實際系統架構來決定使用哪種方式

被呼叫方解決返回的響應頭的包含允許跨域訪問的資訊,需要被呼叫方進行**的修改。(可由具體應用新增允許跨域資訊,也可以由容器,tomcat,jetty等新增)

通過filter實現

將允許跨域請求的資訊配置在nginx或者apache**伺服器

2. 呼叫方解決

在呼叫方與被呼叫方中間再增加一層,該層做**,將呼叫方的請求**到被呼叫方。其中第一點因為呼叫方與該**層在同乙個網域名稱下,所以不會有跨域問題。第二點,由於不是瀏覽器發起的請求,所以**層呼叫被呼叫方也是不存在跨域問題的(參見跨域的三要素)。

簡單請求與非簡單請求

當瀏覽器發起乙個跨域請求的時候會先判斷是簡單請求還是非簡單請求。

對於簡單請求,瀏覽器會先請求,拿到結果後再判斷是否跨域。

對於非簡單請求,瀏覽器會先發起乙個預檢options請求,檢查通過之後再發起實際的請求。

對於帶cookie的跨域請求,

需要將allowedorigins設定為具體的origin,而不能使用 *。

需要設定響應引數 allowcredentials(true),允許帶cookie的跨域

前端跨域請求get 解決前端跨域問題方案彙總

1.同源策略如下 url說明 是否允許通訊 同一網域名稱下 允許同一網域名稱下不同資料夾 允許同一網域名稱,不同埠 不允許同一網域名稱,不同協議 不允許網域名稱和網域名稱對應ip 不允許主域相同,子域不同 不允許同一網域名稱,不同二級網域名稱 同上 不允許 cookie這種情況下也不允許訪問 不同網...

前端跨域請求資源

前幾天在開發專案期間 遇到跨域請求這類問題,由於一開始找不到問題所在之處,採坑不少.所遇問題如下圖 找了好久才發現,產生這種情況的原因 在請求頭部需要新增一些 beforesend function xhr 再新增這些之後又報了 access control allow origin在同乙個專案出現...

js跨域 ajax跨域 跨域方式(前端)

跨域方式 cors 跨域資源共享 當使用xmlhttprequest傳送請求時,瀏覽器會自動加上乙個請求頭 origin,後端在接受到請求後確定響應後會在response headers中加入乙個屬性 access control allow origin,值就是發起請求的源位址 瀏覽器得到響應會進...