前端跨域的解決方式

前端與服務端數據交互時，涉及到跨域的一些問題。JavaScript出於安全的考慮，禁止了跨域調用其餘頁面的對象，也即同源策略限制了一個源（origin）中加載文本或腳本與來自其它源（origin）中資源的交互方式。

什麼是跨域？

若是兩個頁面擁有相同的協議（protocol），端口（若是指定），和主機，那麼這兩個頁面就屬於同一個源（origin），JavaScript容許這種同源頁面的數據互相通訊。

帶來的麻煩，以及解決方案

同源策略讓JavaScript或Cookie只能訪問同域下的內容，但在實際開發項目時會不可避免的要進行跨域操做，所以給前端帶來了麻煩，跨域能力也算是前端工程師的基本功之一，對於端口和協議的不一樣，只能經過後臺來解決了，下面主要說說主機不一樣狀況實現跨域。

神器JSONP

JSONP是比較流行的跨域處理方式，網絡上的定義：JSONP是資料格式JSON的一種使用模式，可讓網頁從別的網域要資料，原理是HTML的script標籤能夠加載並執行其餘域JS文件。站點B把要提供的數據做爲參數傳給一個站點A定義的全局函數，站點A引用這個文件就能夠跨域獲取數據了，A站還能夠把少許參數放在script標籤的src裏提交給B站。外鏈JS這種方案只支持GET，受IE下url長度不能超過2083個字節的限制和出於安全考慮，通常不用來提交數據。

JSONP實際上就是被包含在一個回調函數中的JSON，例如callback({"name":"zhangsan"});

所以咱們能夠知道JSONP有兩部分組成：回調函數和數據。回調函數是當響應到來時應該在頁面中調用的函數，而數據就是傳入回調函數中的JSON數據，須要注意的是這個回調函數必定要讓後端開發人員處理包裹，不然只能獲取json數據，不能使用。

在js中，不能夠直接用XMLHttpRequest請求不一樣域上的數據。但咱們知道在頁面上引入不一樣域上的js腳本文件是被容許的，JSONP就正是利用這個特性來實現的，例如：

<script src="http://jd.com/data.php?callback=dosomething"></script>

<script type="text/javascript">

function dosomething(jsondata){

　　console.log(jsondata);

}

</script>

js文件載入成功後，會執行咱們在url參數中指定的函數（dosomething），而且會把咱們須要的json數據（jsondata）做爲參數傳入。因此再次強調jsonp是須要服務器端的頁面進行相應的配合的。

<?php

　　$callback=$_GET['callback'];//獲得回調函數名

　　$data={'name':'張三',sex:'男',age:'15'};//要返回的數據

　　echo $callback.'('.json_encode($data).')';//輸出

?>

最終輸出結果爲：dosomething({'name':'張三',sex:'男',age:'15'});

若是你使用jquery或者zepto，那麼經過它封裝的方法就能很方便的來進行JSONP操做了。

JSONP的優勢是：

①：它不像XMLHttpRequest對象實現的Ajax請求那樣受到同源策略的限制

②：它的兼容性更好，在老版本的瀏覽器中能夠運行，不須要XMLHttpRequest或ActiveX的支持

③：它在請求完畢後能夠經過調用callback的方式回傳結果，方便調用。

JSONP的缺點則是：

①：它只支持GET請求而不支持POST等其餘類型的HTTTP請求，不能提交大量數據

②：它只支持跨域HTTP請求這總狀況，不能解決不一樣域的兩個頁面之間如何進行JavaScript調用的問題。

先進的CORS

W3C推薦了一種更爲先進的機制，也就是CORS（Cross-Origin Resource Sharing）跨域資源共享，定義了必須在訪問跨域資源時，瀏覽器與服務器應該如何溝通。CORS背後的基本思想就是使用自定義的HTTP頭部，讓服務器能聲明哪些來源能夠經過瀏覽器訪問該服務器上的資源，從而決定請求或響應是應該成功仍是失敗，CORS自己並不是絕對很安全，可利用OAuth2措施來增強保障。

與JSONP相比較，CORS支持全部類型的HTTP請求，且開發者可使用原生普通的XMLHttpRequest對象發起請求和得到數據，配合新的JSAPI一塊兒使用，實現強大的新體驗功能。