前端面試之同源和跨域詳情介紹

跨域是由瀏覽器的同源策略引起的，是指頁面請求的url地址，必須與瀏覽器上url地址處於同域上（即網域名稱，連接埠，協議相同），下面這篇文章就來給大家介紹了關於前端面試必備之同源和跨域的相關資料，文中通過範例程式碼介紹的非常詳細，需要的朋友可以參考下。

前言

眾所周知瀏覽器的同源策略及跨域的方法在前端面試中也是出場率極高的問題，本文主要跟大家分享了關於前端面試時會遇到的同源和跨域問題，下面話不多說了，來一起看看詳細的介紹吧。

什麼是同源策略

同源策略是用來限制從一個源載入的文檔或者指令碼如何與來自另一個源的資源進行互動，是一種用於隔離潛在的惡意檔案的關鍵的安全機制。

何謂同源

如果協議、網域名稱和連接埠對於兩個頁面來說是相同的，則這兩個頁面就是同源的。比如：http://www.hyuhan.com/index.html 這個網站，協議是http，網域名稱是www.hyuhan.com，連接埠是80(預設連接埠)，它的同源情況如下：

• http://www.hyuhan.com/other.html：同源

• http://hyuhan.com/other.html：不同源（網域名稱不同）

• https://www.hyuhan.com/other.html：不同源（協議不同）

• http://www.hyuhan.com:81/other.html：不同源（連接埠不同）

同源策略是為了保護使用者資訊的安全，受到同源策略限制的主要有以下幾種行為：

1. Cookie、LocalStorage和IndexDB無法讀取

2. DOM無法操作

3. AJAX請求不能發送

如何進行跨域訪問

怎麼跨域進行AJAX請求

主要由三種方法可以繞過同源策略的限制，來進行跨域的AJAX請求。

JSONP

JSONP是用戶端與服務端跨域通訊的常用的方法。利用可以跨域的<script&bt;元素，向伺服器請求json資料，服務端收到請求後，將資料放在一個回呼函數中傳回來。實現如下：

window.onload = function() {    var script = document.createElement('script');    script.src = "http://example.com/callback=test";    document.appendChild(script);}function test(res) {    console.log(res);}

src的callback參數是用來設定後端需要調用的回呼函數的名字的，伺服器返回的資料如下：

test({    "name": "小明",    "age": 24    })

這樣，前端就能跨域讀取後端的資料了。但是jsopn只能發生get請求，不能發送post請求。

WebSocket

WebSocket是一種基於TCP的新的網路通訊協定，它不實行同源策略，只要伺服器支援，就可以進行跨域訪問。而且WebSocket並不限於以Ajax方式通訊，因為Ajax技術需要用戶端發起請求，而WebSocket伺服器和用戶端可以彼此相互推送資訊。

CORS

CORS是Access-Control-Allow-Origin（跨域資源共用）的縮寫，它是一個W3C的標準。CORS需要瀏覽器和伺服器同時支援，目前基本所有的瀏覽器都支援該功能。伺服器端對於CORS的支援，主要就是通過設定Access-Control-Allow-Origin來進行的。如果瀏覽器檢測到相應的設定，就可以允許Ajax進行跨域的訪問。

document.domain

Cookie是伺服器寫入瀏覽器的資訊，安全起見，只有同源的網頁才能共用。但是，如果兩個網頁的頂層網域相同，但是耳機網域名稱不同的話，可以通過設定document.domain來共用Cookie。

比如，一個網頁網域名稱是http://w1.example.com/a.html ，另一個網頁網域名稱是http://w2.example.com/b.html ，只要給們設定相同的document.domain，這兩個網頁就可以共用Cookie。

postMessage API

postMessage()方法允許來自不同源的指令碼採用非同步方式進行有限的通訊，可以實現跨文檔、多視窗、跨域訊息傳遞。用postMessage()函數傳遞訊息，目標頁面監聽window的message事件接收訊息。利用postMessage，我們可以跨域讀取LocalStorage和IndexDB還有DOM資料。

window.name

瀏覽器視窗有window.name的屬性，該屬性規定無論是否同源，只要在一個視窗裡，前一個網頁設定了這個屬性，後一個網頁就可以讀取它。即在一個視窗(window)的生命週期內,視窗載入的所有的頁面都是共用一個window.name的，每個頁面對window.name都有讀寫的許可權，window.name是持久存在一個視窗載入過的所有頁面中的。顯然，這是可以實現跨域訪問的。