跨域獲取後台資料undefined 跨域

同源策略限制從乙個源載入的文件或指令碼如何與來自另乙個源的資源進行互動。是乙個用於隔離潛在惡意檔案的關鍵的安全機制。瀏覽器出於安全的考慮只允許跟本域下面的介面進行互動，不同域下，在對方沒有允許的前提上，不能讀寫對方的資源。

本域指的是同協議、同網域名稱以及同埠。

的內容是：

getnews()

於是，在瀏覽器端定義了 getnews(data) 的函式後，瀏覽器端將的內容直接載入到 index.html 中，相當於：

很顯然，在上述指令碼中，將當做引數傳入定義好的 getnews(data) 方法中，執行此方法即可。

若瀏覽器向伺服器端請求呼叫介面的話，需要將約定的函式名使用 callback 傳遞給服務端，服務端去解析 callback 這個引數獲取到的函式名，將要返回的資料使用該函式名包裹返回給瀏覽器，後續如上述操作。故 jsonp 需要對應的介面的後端配合才能實現。

cors 是 w3c 推出的一種跨域的訪問的驗證機制。這種機制讓 web 應用伺服器能支援跨站訪問控制，使跨站資料傳輸更加安全，減輕跨域 http 請求的風險。

目前主流瀏覽器都已基本提供對跨域資源共享的支援，ie 支援到版本 10 以上，移動端瀏覽器也幾乎全部支援。

當使用 xmlhttprequest 傳送請求時，瀏覽器若發現請求不符合同源策略，會給該請求加乙個請求頭：origin，後台進行一系列處理，如果確定接受請求則在返回結果中加入乙個響應頭：access-control-allow-origin；瀏覽器判斷該響應頭中是否包含 origin 的值，如果有瀏覽器則會處理響應，同時我們會拿到響應資料；如果不包含，瀏覽器則直接駁回，這時我們就無法拿到資料了。

可以設定的響應頭資訊：access-control-allow-origin

access-control-allow-origin: | *

origin 表示被允許跨域訪問這個資源的**，* 代表全部**。瀏覽器會檢測這個引數，如果符合要求，才會去獲取資源。

注：上述兩種跨域方式（json 和 cors）都需要服務端的配合才能實現。

document.domain 預設的值是整個網域名稱，所以即使兩個網域名稱的二級網域名稱一樣，他們的 document.domain 也不一樣。

降域使用的條件：

呼叫另乙個頁面的 window 物件

二級網域名稱相同

協議相同

埠相同降域的使用方法就是將符合上述條件的頁面中的 document.domain 設定為同樣的二級網域名稱，這樣就可以使用其他頁面中的 window 物件做一些操作。

注：

html5 中，window 物件新增了方法 postmessage。window.postmessage() 方法被呼叫時，會在所有頁面指令碼執行完畢之後向目標視窗派發乙個 messageevent 訊息。

otherwindow.postmessage(message, targetorigin, [transfer]);

這個方法非常強大，無視協議、埠、網域名稱的不同。

var windowobj = window; // 可以是其他的 window 物件的引用
var data = null;
addeventlistener('message', function(e)
});

上述的 message 事件就是用來接收 postmessage 傳送過來的請求的。函式引數的屬性有以下幾個：

注：降域和 postmessage 只用於瀏覽器之間，多用於當前頁面跟頁面中的 iframe 進行通訊，做一些頁面巢狀的操作。降域需要網域名稱相同，而 postmessage 可以使用在任意有window 物件的情況下。

附：手寫ajax

跨域獲取後台資料undefined 跨域

vue axios跨域請求後台資料

js 獲取後台資料

vue開發中跨域設定，即配置後台資料

跨域獲取後台資料undefined 跨域

vue axios跨域請求後台資料

js 獲取後台資料

vue開發中跨域設定，即配置後台資料

相關推薦