域名地址的組成元素:
http:// —— 協(xié)議
www —— 子域名
abc.com —— 主域名
8080 —— 端口號
scripts/jquery.js —— 請求資源地址
其中當 協(xié)議 子域名 主域名 端口號 中任意一個不同是都算作不同域您觉。
不同域之間相互請求資源就算作“跨域”领虹,比如:
JavaScript 出于安全方面的考慮旷余,不允許跨域調(diào)用其他頁面的對象骂铁。
所謂跨域罐氨,簡單理解也就是因為JavaScript 同源策略的限制炊林,a.com 域名下的js 無法操作b.com 域名下的對象绩社。
下面對跨域做一些例子進行說明:
www.a.com/demo.html 調(diào)用 www.a.com/service.php (非跨域)
www.a.com/demo.html 調(diào)用 www.b.com/service.php (跨域)
www.a.com/demo.html 調(diào)用 bbs.a.com/service.php (跨域)
www.a.com/demo.html 調(diào)用 www.a.com:81/service.php (跨域)
www.a.com/demo.html 調(diào)用 https://www.a.com/service.php (跨域)
處理跨域方法1
代理——通過同域名的web服務(wù)器端創(chuàng)建一個代理。
這里有兩個域名:
www.a.com
www.b.com
可通過a的web服務(wù)器后臺(www.a.com/proxy-b-service.php)調(diào)用b的服務(wù)器(www.b.com/service.php)的服務(wù)腋舌,然后再把響應(yīng)的結(jié)果返回給前端盏触,這樣前端調(diào)用a同域名的服務(wù)就和調(diào)用b的服務(wù)效果相同了。
處理跨域方法2
JSONP——可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題块饺。
在 www.a.com 頁面中:
<script>
function jsonp(json){
alert(json["name"]);
}
</script>
<script src="http://www.b.com/jsonp.js"></script>
在 www.b.com 頁面中:
jsonp({'name':'張三','age':22});
注意:jsonp是不支持POST請求的赞辩,他只支持GET請求
處理跨域方法3
XHR2——在HTML5中已提供XMLHttpRequest Level2及實現(xiàn)了跨域訪問以及其他的一些新功能
注意:其不兼容IE10以下版本。
操作只需在服務(wù)器端添加以下部分:
header('Access-Control-Allow-Origin:*');
//其中“*”代表所有域名都可以訪問該服務(wù)器端授艰,如果需特定可直接輸入允許訪問的域名
header('Access-Control-Allow-Methods:POST,GET');
//設(shè)置允許可用域名使用POST和GET方法