處理跨域方式

一、跨域

一個域名地址的組成：

當協議、子域名、主域名、端口號中任意一個不相同時，都算作不同域。

不同域之間相互請求資源，就算作“跨域”。

比如：http://www.abc.com/index.html請求http://www.efg.com/service.php

JavaScript出於安全方面的考慮，不允許跨域調用其他頁面的對象。

什么是跨域呢，簡單地理解就是因為JavaScript同源策略的限制，a.com域名下的js無法操作b.com或者是c.a.com域名下的對象。

• ww.abc.com/index.html調用www.abc.com/service.php(非跨域)
• ww.abc.com/index.html調用www.efg.com/service.php(跨域) 主域名不同
• ww.abc.com/index.html調用bbs.abc.com/service.php(跨域)   子域名不同
• ww.abc.com/index.html調用www.abc.com:81/service.php(跨域)   端口號不同
• ww.abc.com/index.html調用https://www.abc.com/service.php(跨域)   不寫默認是http協議，協議不同，所以跨域。

子域名：

下面都是abc.com的子域名，可以有一級，也可以有多級，子域名不同就跨域了。

• www.abc.com
• bbs.abc.com
• beijing.bbs.abc.com
• haidian.beijing.bbs.abc.com

一、處理跨域方式—代理

主要是后端做一個代理,跟前端沒關系。

通過在同域名的web服務器端創建一個代理：

北京服務器（域名：www.beijing.com）

上海服務器（域名：www.shanghai.com）

比如在北京的web服務器的后台

(www.beijing.com/proxy-shanghaiservice.php)來調用上海服務器(www.shanghai.com/service.php)的服務，然后把響應結果返回給前端，這樣前端調用北京同域名的服務就和調用上海的服務效果相同了。

二、處理跨域方式—JSONP

JSONP解決主流瀏覽器get請求的跨域數據訪問問題。

在www.aaa.com頁面中
<script>
function jsonp(json){
    slert(json["name"]);
}
</script>

<script src="http://www.bbb.com/jsonp.js"></script> 
//載入另外一個域名中的js，在www.bbb.com/jsonp.js代碼中調用jsonp方法：
jsonp({'name':'洪七','age':24});

1、原理

在A域名去聲明一個方法，

載入B域名中的js，因為script可以跨域提交http請求。

B域名中載入的js中直接去調用a域名中聲明的方法。

借助script標簽，A域名去聲明，B域名去調用。

其實這種處理方式和XHR沒有太大關系了，只是借助script標簽可以跨域訪問的特性。

2、使用

前端改造：

在get請求的代碼中需要修改一下dataType，從json改為jsonp。再增加一個屬性，這個名字就叫jsonp，值可以任意寫，比如叫callback。

也就是對代碼做了2處改動，

• 把dataType從json改成jsonp，
• 增加一jspnp的屬性取了個值叫callback。

后端改造：

在get請求的處理中獲取到callback， 前端jsonp參數取了個名字叫callback，所以后端就要獲取callback。

如果前端取callback123的話，后端就要獲取callback123。

3、分析

發請求的時候jquery自動增加了一個參數，參數的名稱是callback123，參數的值是jquery自動生成的。

比如我實際應用中一例子：

發完ajax請求，網頁中請求的Headers的Request URL為：http://api.xxx.com/vipuser/grade?cb=jQuery18308066630555287624_1487902991956&username=xxx&token=xxx&format=jsonp

參數名cb，參數的值是jquery自動生成的。
這個值是：jQuery18308066630555287624_1487902991956

響應Response為：

返回值：jQuery18308066630555287624_1487902991956({"message":"success","gradeInfo":{xxx},"code":"0","info":{xxx}})

返回值前面是參數的值，一模一樣，后面用括號括起了要返回的json對象。

最后注意一點：JSONP的原理只能對get請求有效，不支持POST請求。

三、處理跨域方式—XHR2(HTML5)

html5提供的XMLHttpRequest Level2已經實現了跨域訪問以及其他的一些新功能。

IE10以下不支持XHR2這個標准。

使用

客戶端不需要什么改造。

服務器：只需要設置2個服務器頭。

header('Access-Control-Allow-Origin:*');后面有個*星號，*就是所有域都可以訪問，當然也可以設置特點的域名。比如說我們服務器在上海，可以在Access-Control-Allow-Origin后面設置一個北京服務器的域名，只有在北京的那個域名可以訪問。

header('Access-Control-Allow-Methods:POST,Get');

 

參考：

JSONP基本概念

http://blog.csdn.net/winnerx/article/details/46573645

初步了解關於js跨域問題

http://www.cnblogs.com/zhangyanjie/p/6619160.html

JSONP跨域的原理解析

http://www.nowamagic.net/librarys/veda/detail/224

 js中各種跨域問題實戰小結（一）

http://www.cnblogs.com/skylar/p/4094509.html

跨域淺談

http://www.cnblogs.com/jingh/p/5922398.html

 （Ajax） 淺談 JSONP 的原理與實現

https://segmentfault.com/a/1190000007232373

本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載注明出處：http://www.cnblogs.com/starof/p/4904929.html有問題歡迎與我討論，共同進步。