前端開發面試總結（五）

JSONP實現跨域的方式

1、解決跨域問題的緣由：解除同源策略對於瀏覽器的限制。

同源策略：同源策略是一種約定，是瀏覽器最基本最核心的安全功能。是爲了防止瀏覽器受到XSS，CSRF等攻擊。

同源指的是協議、端口、域名都相同時，則爲同源。若是這三個中只要有一個不一樣也不是同源。

同源策略的限制：

• 一、Cookie、localStorage和indexDB沒法讀取。
• 二、DOM和JS對象不能得到
• 三、AJAX不能發送

雖然同源策略有一些限制，可是容許<script>標籤的src屬性，<link>標籤的ref屬性和<img>標籤的src屬性跨域進行資源請求。

2、跨域 跨域指的是一個域之下的腳本或者文檔去請求另外一個域之下的資源，這個過程就是跨域。

3、實現跨域的方式 一、JSONP實現跨域 JSONP實現跨域的原理：動態建立<script>標籤，利用<script>的src屬性不受同源策略的限制，實現跨域獲取數據。 JSONP由兩部分組成：回調函數和數據。回調函數是響應在該頁面觸發時調用的函數。程序示例：

前端代碼以下：

//動態建立<script>標籤，而且設置src的值
var script = document.createElement("script");
script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);

function handleResponse(response){
    //對response數據操做的代碼
}
複製代碼

服務端代碼以下：

//這裏的handleCallback是服務端接收到回調函數名參數後構造生成的
handleCallback({"status": true, "user": "admin"})
複製代碼

JSONP實現跨域的方法只能用於GET請求，獲取到的是JavaScript執行代碼。

CORS實現跨域

• 相比於JSONP方式，CORS支持POST提交，經過CORS實現跨域的原理就是在響應頭header中注入Access-Control-Allow-Origin，就能夠實現跨域的操做了。CORS須要瀏覽器和服務器同時支持，目前絕大多數瀏覽器都支持，IE瀏覽器不能低於IE10。使用CORS實現跨域的過程是瀏覽器自動完成的，只要服務器端實現了CORS接口就能夠實現跨域通訊。

• 對於簡單請求，瀏覽器會直接發送CORS請求，具體說來就是在header中加入origin請求頭字段。一樣，在響應頭中，返回服務器設置的相關CORS頭部字段，Access-Control-Allow-Origin字段爲容許跨域請求的源。請求時瀏覽器在請求頭的Origin中說明請求的源，服務器收到後發現容許該源跨域請求，則會成功返回。

COSR字段介紹

（1）Access-Control-Allow-Methods

該字段必需，它的值是逗號分隔的一個字符串，代表服務器支持的全部跨域請求的方法。注意，返回的是全部支持的方法，而不單是瀏覽器請求的那個方法。這是爲了不屢次"預檢"請求。

（2）Access-Control-Allow-Headers

若是瀏覽器請求包括Access-Control-Request-Headers字段，則Access-Control-Allow-Headers字段是必需的。它也是一個逗號分隔的字符串，代表服務器支持的全部頭信息字段，不限於瀏覽器在"預檢"中請求的字段。

（3）Access-Control-Allow-Credentials

該字段與簡單請求時的含義相同。

（4）Access-Control-Max-Age

該字段可選，用來指定本次預檢請求的有效期，單位爲秒。上面結果中，有效期是20天（1728000秒），即容許緩存該條迴應1728000秒（即20天），在此期間，不用發出另外一條預檢請求。