在解決Ajax跨域問題之前，我們先一起來看看什么是瀏覽器的同源策略
一.瀏覽器同源政策
- 含義
1995年，同源政策由 Netscape 公司引入瀏覽器。目前，所有瀏覽器都實行這個政策。
最初，它的含義是指，A網(wǎng)頁設(shè)置的 Cookie，B網(wǎng)頁不能打開，除非這兩個網(wǎng)頁"同源"。所謂"同源"指的是"三個相同"。
協(xié)議相同
域名相同
端口相同
舉例來說，http://www.guangzhou.com/p/page.html這個網(wǎng)址，協(xié)議是http://，域名是 www.guangzhou.com，端口是80（默認(rèn)端口可以省略）。它的同源情況如下。
http://www.guangzhou.com/dir/other.html： 同源
http://guangzhou.com/dir/other.html： 不同源（域名不同）
http://v2.www.guangzhou.com/dir/other.html：不同源（域名不同）
http://www.guangzhou.com:81/dir/other.html：不同源（端口不同）
目的
同源政策的目的，是為了保證用戶信息的安全，防止惡意的網(wǎng)站竊取數(shù)據(jù)。
設(shè)想這樣一種情況：A網(wǎng)站是一家銀行，用戶登錄以后，又去瀏覽其他網(wǎng)站。如果其他網(wǎng)站可以讀取A網(wǎng)站的 Cookie，會發(fā)生什么？
很顯然，如果 Cookie 包含隱私（比如存款總額），這些信息就會泄漏。更可怕的是，Cookie 往往用來保存用戶的登錄狀態(tài)，如果用戶沒有退出登錄，其他網(wǎng)站就可以冒充用戶，為所欲為。因為瀏覽器同時還規(guī)定，提交表單不受同源政策的限制。
由此可見，"同源政策"是必需的，否則 Cookie 可以共享，互聯(lián)網(wǎng)就毫無安全可言了。限制范圍
隨著互聯(lián)網(wǎng)的發(fā)展，"同源政策"越來越嚴(yán)格。目前，如果非同源，共有三種行為受到限制。
（1） Cookie、LocalStorage 和 IndexDB 無法讀取。
（2） DOM 無法獲得。
（3） AJAX 請求不能發(fā)送。
雖然這些限制是必要的，但是有時很不方便，合理的用途也受到影響。
在同源策略下，在某個服務(wù)器下的頁面是無法獲取到該服務(wù)器以外的數(shù)據(jù)的，但img、iframe、script等標(biāo)簽是個例外，這些標(biāo)簽可以通過src屬性請求到其他服務(wù)器上的數(shù)據(jù)。
我們下面只專注于ajax跨域請求?。?！
二.如何解決ajax跨域
一般ajax跨域就是通過代理，JSONP或者CORS三種方式解決(注意，現(xiàn)在JSONP很少用了，所以了解下即可)
（1）JSONP方式解決跨域問題
jsonp解決跨域問題是一個比較古老的方案(實際中不推薦使用),這里做簡單介紹(實際項目中如果要使用JSONP,一般會使用JQ等對JSONP進(jìn)行了封裝的類庫來進(jìn)行ajax請求)
實現(xiàn)原理
JSONP之所以能夠用來解決跨域方案,主要是因為 <script> 腳本擁有跨域能力,而JSONP正是利用這一點來實現(xiàn)。具體原理如圖
實現(xiàn)流程
客戶端網(wǎng)頁網(wǎng)頁通過添加一個<script>元素，向服務(wù)器請求JSON數(shù)據(jù)，這種做法不受同源政策限制
當(dāng)我們通過JSONP模式請求跨域資源時，服務(wù)器返回給客戶端一段javascript代碼，這段javascript代碼自動調(diào)用客戶端回調(diào)函數(shù)。
客戶端
服務(wù)器端(PHP)
<?php
$staff = array
(
array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "總經(jīng)理"),
array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "開發(fā)工程師"),
array("name" => "黃蓉", "number" => "103", "sex" => "女", "job" => "產(chǎn)品經(jīng)理")
);
$jsonp = $_GET["callback"];
//檢查是否有員工編號的參數(shù)
if (!isset($_GET["number"]) || empty($_GET["number"])) {
echo $jsonp . '({"success":false,"msg":"參數(shù)錯誤"})';
return;
}
//獲取number參數(shù)
$number = $_GET["number"];
$result = $jsonp . '({"success":false,"msg":"沒有找到員工。"})';
//遍歷$staff多維數(shù)組，查找key值為number的員工是否存在，如果存在，則修改返回結(jié)果
foreach ($staff as $value) {
if ($value["number"] == $number) {
$result = $jsonp . '({"success":true,"msg":"找到員工：員工編號：' . $value["number"] .
'，員工姓名：' . $value["name"] .
'，員工性別：' . $value["sex"] .
'，員工職位：' . $value["job"] . '"})';
break;
}
}
echo $result;
由于<script>元素請求的腳本，直接作為代碼運行。這時，只要瀏覽器定義了foo函數(shù)，該函數(shù)就會立即調(diào)用。作為參數(shù)的JSON數(shù)據(jù)被視為JavaScript對象，而不是字符串，因此避免了使用JSON.parse的步驟。
注意,一般的JSONP接口和普通接口返回數(shù)據(jù)是有區(qū)別的,所以接口如果要做JSONO兼容,需要進(jìn)行判斷是否有對應(yīng)callback關(guān)鍵字參數(shù),如果有則是JSONP請求,返回JSONP數(shù)據(jù),否則返回普通數(shù)據(jù)
附（JQ對JSONP進(jìn)行了封裝的類庫來進(jìn)行ajax請求）：
使用注意
基于JSONP的實現(xiàn)原理,所以JSONP只能是“GET”請求,不能進(jìn)行較為復(fù)雜的POST和其它請求,所以遇到那種情況,就得參考下面的CORS解決跨域了(所以如今它也基本被淘汰了)
(2)CORS解決跨域問題
CORS請求原理
CORS是一個W3C標(biāo)準(zhǔn)，全稱是"跨域資源共享"（Cross-origin resource sharing）。它允許瀏覽器向跨源服務(wù)器，發(fā)出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。
基本上目前所有的瀏覽器都實現(xiàn)了CORS標(biāo)準(zhǔn)(IE10以下不支持),其實目前幾乎所有的瀏覽器ajax請求都是基于CORS機(jī)制的,只不過可能平時前端開發(fā)人員并不關(guān)心而已(所以說其實現(xiàn)在CORS解決方案主要是考慮后臺該如何實現(xiàn)的問題)。
如何判斷是否是簡單請求?
瀏覽器將CORS請求分成兩類：簡單請求（simple request）和非簡單請求（not-so-simple request）。只要同時滿足以下兩大條件，就屬于簡單請求。
請求方法是以下三種方法之一：HEAD,GET,POST
HTTP的頭信息不超出以下幾種字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type(只限于三個值application/x-www-form-urlencoded、 multipart/form-data、text/plain)
凡是不同時滿足上面兩個條件，就屬于非簡單請求。
實現(xiàn)——PHP后臺配置
PHP后臺的配置幾乎是所有后臺中最為簡單的,遵循如下步驟即可:
第一步:配置Php 后臺允許跨域
<?php
header('Access-Control-Allow-Origin:*'); //支持全域名訪問，不安全，部署后需要固定限制為客戶端網(wǎng)址
header('Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE'); //支持的http 動作
header('Access-Control-Allow-Headers:x-requested-with,content-type'); //響應(yīng)頭 請按照自己需求添加。
實現(xiàn)——Node.js后臺配置(express框架)
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By", ' 3.2.1')
//這段僅僅為了方便返回json而已
res.header("Content-Type", "application/json;charset=utf-8");
if(req.method == 'OPTIONS') {
//讓options請求快速返回
res.sendStatus(200);
} else {
next();
}
});
(3)代理請求方式解決跨域問題
這種方式是通過后臺(ASP、PHP、JAVA、ASP.NET)獲取其他域名下的內(nèi)容，然后再把獲得內(nèi)容返回到前端，這樣因為在同一個域名下，所以就不會出現(xiàn)跨域的問題。
實現(xiàn)過程
比如在廣州的WEB服務(wù)器的后臺（www.guangzhou.com/proxy-shanghaiservice.php）來調(diào)用上海（www.shanghai.com/service.php）的服務(wù)，然后把響應(yīng)的結(jié)果返回前端，這樣前端調(diào)用廣州同域名的服務(wù)就和調(diào)用上海的服務(wù)效果相同了。
參考資料：
瀏覽器同源政策及其規(guī)避方法
