跨域問題詳解

2022-05-22 09:30:11 字數 3507 閱讀 2853

access to xmlhttprequest at '' from origin '' has been blocked by cors policy: no'access-control-allow-origin' header is present on the requested resource.
cors策略已阻止從「」源「」對xmlhttprequest的訪問:請求的資源上不存在「access-control-allow-origin」頭。

我們把它理順一下可以變成:

乙個網頁請求另外乙個網頁的資源被cors策略給阻止了,原因xmlhttprequest的請求不存在「access-control-alloworigin"頭,如果你恰巧有網路協議方面的知識儲備,或許你已經了解跨域是什麼了,以及如何解決。

我們可以在簡化一下這個資訊:網頁間的xmlhttprequest請求被cors策略給阻止了。好的,來到這裡我們已經知道了跨域請求失敗的原因是什麼了。cors策略阻止了它!!

(推薦閱讀mdn的文章:中文版: ,英文版:

由上邊的介紹可知:cors是不同域之間資源共享的一種機制,它使用額外的http頭來告訴瀏覽器讓執行在乙個 origin (domain) 上的web應用被准許訪問來自不同源伺服器上的指定的資源。當乙個資源從與該資源本身所在的伺服器不同的域、協議或埠請求乙個資源時,資源會發起乙個跨域 http 請求。

跨域的安全限制,主要是針對瀏覽器端來說的,伺服器端是不存在跨域安全限制的。。所以我們可以通過**伺服器去解決跨域問題。

域:簡單理解由協議+網域名稱+埠組成

雖然在上邊的翻譯中告訴我們是因為cors策略給阻止了請求,但我們通過查閱cors在mdn上的解釋可以知道,cors是不同域之間共享資源的一種機制,也就是說它可以說是解決跨域的一種方案。那麼引起跨域的原因是什麼?

上面說到跨域只存在於瀏覽器之間,這是因為瀏覽器存在有乙個同源策略。什麼是同源策略(sop)呢?可以看一看mdn上的文章(

同源策略是瀏覽器的乙個安全功能,不同源的客戶端指令碼在沒有明確授權的情況下,不能讀寫對方資源。所以xyz.com下的js指令碼採用ajax讀取abc.com裡面的檔案資料是會被拒絕的。同源策略限制了從同乙個源載入的文件或指令碼如何與來自另乙個源的資源進行互動。這是乙個用於隔離潛在惡意檔案的重要安全機制。

阮一峰的部落格中有一段跨域同源策略的描述

同源政策的目的:是為了保證使用者資訊的安全,防止惡意的**竊取資料。

設想這樣一種情況:a**是一家銀行,使用者登入以後,又去瀏覽其他**。如果其他**可以讀取a**的cookie,會發生什麼?很顯然,如果 cookie 包含隱私(比如存款總額),這些資訊就會洩漏。更可怕的是,cookie 往往用來儲存使用者的登入狀態,如果使用者沒有退出登入,其他**就可以冒充使用者,為所欲為。因為瀏覽器同時還規定,提交表單不受同源政策的限制。由此可見,"同源政策"是必需的,否則cookie 可以共享,網際網路就毫無安全可言了。

在這裡簡單介紹一下cookie,因為理解了cookie能更好的理解瀏覽器與伺服器間的互動。我們知道瀏覽器與伺服器間使用過http協議來進行互動的,但是http協議是無狀態的,伺服器是無法通過接收到的http請求來區分是哪個使用者發起的請求,即伺服器不知道使用者上一次做了什麼,這嚴重阻礙了互動式web應用程式的實現。在典型的網上購物場景中,使用者瀏覽了幾個頁面,買了一盒餅乾和兩飲料。最後結帳時,由於http的無狀態性,不通過額外的手段,伺服器並不知道使用者到底買了什麼。為了做到這點,就需要使用到cookie了。伺服器可以設定或讀取cookies中包含資訊,藉此維護使用者跟伺服器會話中的狀態。

如何檢視cookie?

可以開啟菜鳥教程裡有關cookie的介紹

各位可以發現cookies是有分組的,每個域下邊存在有不同的cookie值,cookie是由服務端生成的,傳送給客戶端(通常是瀏覽器)的。cookie總是儲存在瀏覽器中。

當瀏覽器與伺服器之間通訊時,瀏覽器會在每個http請求中攜帶當前域下的cookie。

到這裡我們已經大概了解什麼是同源策略,為什麼要有同源策略。

同源策略限制的行為:

(1) 無法讀取非同源網頁的 cookie、localstorage 和 indexeddb。

(2) 無法接觸非同源網頁的 dom。

(3) 無法向非同源位址傳送ajax請求(可以傳送,但瀏覽器會拒絕接受響應)。

不受同源策略限制的情況:

有一些情況是不受同源策略的影響,簡單列舉如下:

(1)頁面中的超連結,點選可以訪問其他不同源的頁面。

(2)表單提交,不同源的頁面可以相互提交表單資料。

(3)通過html標籤請求資源,如scrpit,img標籤。

這裡介紹三中種跨域的解決方案jsonp,**伺服器和cors

jsonp利用的是通過html標籤請求資源,不受同源策略影響。它的基本思想是,網頁通過新增乙個script元素,向伺服器請求資料,這種做法不受同源策略限制;伺服器收到請求後,將資料放在乙個指定名字的**函式裡傳回來。 先貼上一段網上摘抄的**

# 預先定義好處理資料的**

function callbackname(data) ;

# 建立scrpit元素請求資源,以備後用

function addscripttag(src)

# 在頁面載入完成時呼叫函式傳送指定目標請求

window.onload = function ()

初次看這**時不太理解,因為當時沒有接觸後端開發,無法理解它們的互動過程。我們要明白一點script標籤請求回來的資料瀏覽器是當成js去解析的,我們可以簡單驗證一下,雖然沒有資料講述這一部分的內容。

script1.js**如下

script2.js**如下

alert(1);
當把這個頁面開啟,會發現頁面彈出兩次彈框,控制台提示無法解析h1標籤的錯誤。所以可以大概理解瀏覽器是將請求回來的資料當成js**執行。

這時候我們就可以通過url所帶的querystring傳遞我們的函式名,例如下邊這個url傳遞了callbackname作為**函式的名稱,而原先的js**又預先定義了**函式。當後代給我們返回,callbackname()這樣的字串時,瀏覽器就會自動呼叫預先定義的**函式,而需要的資料就通過傳遞過來了,於是實現了跨域請求。還是不太理解的小夥伴可以去我的倉庫裡檢視相關**。

jsonp只能支援get請求,並且前後端需要商量好**函式的名稱。

跨域問題詳解

1.為什麼會產生跨域問題 之所以會產生跨域問題是由於瀏覽器實現了同源策略 same origin policy 同源策略規定發起ajax請求時當原位址 原始域 和請求位址 請求域 的協議 網域名稱 埠號三者任意乙個不同就會引起跨域問題。2.什麼是同源策略 最核心也最基本的安全功能,如果缺少了同源策略...

跨域問題詳解 ajax跨域解決

跨域問題的產出,根本原因在於瀏覽器的同源策略,什麼又是同源策略呢,官方解釋 同源策略限制了從同乙個源載入的文件或指令碼如何與來自另乙個源的資源進行互動。這是乙個用於隔離潛在惡意檔案的重要安全機制。同源的定義 如果兩個頁面的協議,埠 如果有指定 和網域名稱都相同,則兩個頁面具有相同的源。可以跨域讀取其...

請求跨域問題詳解

什麼是跨域 產生跨域的原因 以下三者都滿足 解決跨域的思路 解決跨域的方法 被調方過濾器解決方法 在過濾器中給預檢請求響應物件中增加對應頭部資訊告訴請求方這個請求允許跨域 res.addheader access control allow origin 允許跨域的請求源位址 res.addhead...