在解決Ajax跨域問題之前简珠，我們先一起來看看什么是瀏覽器的同源策略
一.瀏覽器同源政策
- 含義
1995年，同源政策由 Netscape 公司引入瀏覽器哀峻。目前呈枉，所有瀏覽器都實(shí)行這個(gè)政策。
最初堪侯，它的含義是指嚎尤，A網(wǎng)頁設(shè)置的 Cookie，B網(wǎng)頁不能打開伍宦，除非這兩個(gè)網(wǎng)頁"同源"芽死。所謂"同源"指的是"三個(gè)相同"。
協(xié)議相同
域名相同
端口相同
舉例來說次洼，http://www.guangzhou.com/p/page.html這個(gè)網(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届吁，會(huì)發(fā)生什么错妖？
很顯然，如果 Cookie 包含隱私（比如存款總額）疚沐，這些信息就會(huì)泄漏暂氯。更可怕的是，Cookie 往往用來保存用戶的登錄狀態(tài)亮蛔，如果用戶沒有退出登錄痴施，其他網(wǎng)站就可以冒充用戶，為所欲為尔邓。因?yàn)闉g覽器同時(shí)還規(guī)定晾剖，提交表單不受同源政策的限制锉矢。
由此可見梯嗽，"同源政策"是必需的，否則 Cookie 可以共享沽损，互聯(lián)網(wǎng)就毫無安全可言了灯节。限制范圍
隨著互聯(lián)網(wǎng)的發(fā)展，"同源政策"越來越嚴(yán)格。目前炎疆，如果非同源卡骂，共有三種行為受到限制。
（1） Cookie形入、LocalStorage 和 IndexDB 無法讀取全跨。
（2） DOM 無法獲得。
（3） AJAX 請(qǐng)求不能發(fā)送亿遂。
雖然這些限制是必要的浓若，但是有時(shí)很不方便，合理的用途也受到影響蛇数。
在同源策略下挪钓，在某個(gè)服務(wù)器下的頁面是無法獲取到該服務(wù)器以外的數(shù)據(jù)的，但img耳舅、iframe碌上、script等標(biāo)簽是個(gè)例外，這些標(biāo)簽可以通過src屬性請(qǐng)求到其他服務(wù)器上的數(shù)據(jù)浦徊。
我們下面只專注于ajax跨域請(qǐng)求Ａ笥琛！盔性！
二.如何解決ajax跨域
一般ajax跨域就是通過代理吗蚌，JSONP或者CORS三種方式解決(注意臀突，現(xiàn)在JSONP很少用了扮宠，所以了解下即可)
（1）JSONP方式解決跨域問題
jsonp解決跨域問題是一個(gè)比較古老的方案(實(shí)際中不推薦使用),這里做簡(jiǎn)單介紹(實(shí)際項(xiàng)目中如果要使用JSONP,一般會(huì)使用JQ等對(duì)JSONP進(jìn)行了封裝的類庫來進(jìn)行ajax請(qǐng)求)
實(shí)現(xiàn)原理
JSONP之所以能夠用來解決跨域方案,主要是因?yàn)?<script> 腳本擁有跨域能力,而JSONP正是利用這一點(diǎn)來實(shí)現(xiàn)。具體原理如圖
實(shí)現(xiàn)流程
客戶端網(wǎng)頁網(wǎng)頁通過添加一個(gè)<script>元素涛舍，向服務(wù)器請(qǐng)求JSON數(shù)據(jù)暂筝，這種做法不受同源政策限制
當(dāng)我們通過JSONP模式請(qǐng)求跨域資源時(shí)箩言，服務(wù)器返回給客戶端一段javascript代碼，這段javascript代碼自動(dòng)調(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"];
//檢查是否有員工編號(hào)的參數(shù)
if (!isset($_GET["number"]) || empty($_GET["number"])) {
echo $jsonp . '({"success":false,"msg":"參數(shù)錯(cuò)誤"})';
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":"找到員工：?jiǎn)T工編號(hào)：' . $value["number"] .
'，員工姓名：' . $value["name"] .
'它褪，員工性別：' . $value["sex"] .
'饵骨，員工職位：' . $value["job"] . '"})';
break;
}
}
echo $result;
由于<script>元素請(qǐng)求的腳本，直接作為代碼運(yùn)行茫打。這時(shí)居触，只要瀏覽器定義了foo函數(shù)妖混，該函數(shù)就會(huì)立即調(diào)用。作為參數(shù)的JSON數(shù)據(jù)被視為JavaScript對(duì)象轮洋，而不是字符串制市，因此避免了使用JSON.parse的步驟。
注意,一般的JSONP接口和普通接口返回?cái)?shù)據(jù)是有區(qū)別的,所以接口如果要做JSONO兼容,需要進(jìn)行判斷是否有對(duì)應(yīng)callback關(guān)鍵字參數(shù),如果有則是JSONP請(qǐng)求,返回JSONP數(shù)據(jù),否則返回普通數(shù)據(jù)
附（JQ對(duì)JSONP進(jìn)行了封裝的類庫來進(jìn)行ajax請(qǐng)求）：
使用注意
基于JSONP的實(shí)現(xiàn)原理,所以JSONP只能是“GET”請(qǐng)求,不能進(jìn)行較為復(fù)雜的POST和其它請(qǐng)求,所以遇到那種情況,就得參考下面的CORS解決跨域了(所以如今它也基本被淘汰了)
(2)CORS解決跨域問題
CORS請(qǐng)求原理
CORS是一個(gè)W3C標(biāo)準(zhǔn)弊予，全稱是"跨域資源共享"（Cross-origin resource sharing）祥楣。它允許瀏覽器向跨源服務(wù)器，發(fā)出XMLHttpRequest請(qǐng)求汉柒，從而克服了AJAX只能同源使用的限制荣堰。
基本上目前所有的瀏覽器都實(shí)現(xiàn)了CORS標(biāo)準(zhǔn)(IE10以下不支持),其實(shí)目前幾乎所有的瀏覽器ajax請(qǐng)求都是基于CORS機(jī)制的,只不過可能平時(shí)前端開發(fā)人員并不關(guān)心而已(所以說其實(shí)現(xiàn)在CORS解決方案主要是考慮后臺(tái)該如何實(shí)現(xiàn)的問題)。
如何判斷是否是簡(jiǎn)單請(qǐng)求?
瀏覽器將CORS請(qǐng)求分成兩類：簡(jiǎn)單請(qǐng)求（simple request）和非簡(jiǎn)單請(qǐng)求（not-so-simple request）竭翠。只要同時(shí)滿足以下兩大條件振坚，就屬于簡(jiǎn)單請(qǐng)求。
請(qǐng)求方法是以下三種方法之一：HEAD,GET,POST
HTTP的頭信息不超出以下幾種字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type(只限于三個(gè)值application/x-www-form-urlencoded斋扰、 multipart/form-data渡八、text/plain)
凡是不同時(shí)滿足上面兩個(gè)條件，就屬于非簡(jiǎn)單請(qǐng)求传货。
實(shí)現(xiàn)——PHP后臺(tái)配置
PHP后臺(tái)的配置幾乎是所有后臺(tái)中最為簡(jiǎn)單的,遵循如下步驟即可:
第一步:配置Php 后臺(tái)允許跨域
<?php
header('Access-Control-Allow-Origin:*'); //支持全域名訪問屎鳍，不安全，部署后需要固定限制為客戶端網(wǎng)址
header('Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE'); //支持的http 動(dòng)作
header('Access-Control-Allow-Headers:x-requested-with,content-type'); //響應(yīng)頭 請(qǐng)按照自己需求添加问裕。
實(shí)現(xiàn)——Node.js后臺(tái)配置(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請(qǐng)求快速返回
res.sendStatus(200);
} else {
next();
}
});
(3)代理請(qǐng)求方式解決跨域問題
這種方式是通過后臺(tái)(ASP逮壁、PHP、JAVA粮宛、ASP.NET)獲取其他域名下的內(nèi)容窥淆，然后再把獲得內(nèi)容返回到前端，這樣因?yàn)樵谕粋€(gè)域名下巍杈，所以就不會(huì)出現(xiàn)跨域的問題忧饭。
實(shí)現(xiàn)過程
比如在廣州的WEB服務(wù)器的后臺(tái)（www.guangzhou.com/proxy-shanghaiservice.php）來調(diào)用上海（www.shanghai.com/service.php）的服務(wù)，然后把響應(yīng)的結(jié)果返回前端筷畦，這樣前端調(diào)用廣州同域名的服務(wù)就和調(diào)用上海的服務(wù)效果相同了词裤。
參考資料：
瀏覽器同源政策及其規(guī)避方法
