AJAX学习笔记——跨域

跨域

一个域名地址的组成

http:// www abc.com : 8080 / scripts/jquery.js

协议 子域名 主域名 端口号 请求资源地址

端口号：一般来说域名端口号是80，如果端口号是80，可以省略

• 当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域。
• 不同域之间相互请求资源,就算作“跨域”
• 比如: http://www.abc.com/index.html请求http://www.efg.com/service.php

什么是跨域

JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。什么是跨域呢,简单地理解就是因为JavaScript同源策略的限制, a.com域名下的js无法操作b.com或是c.a.com域名下的对象。

JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。

www.abc.com/index.html调用www.abc.com/service.php (非跨域)

www.abc.com/index.html调用www.efg.com/service.php (跨域)

www.abc.com/index.html调用bbs.abc.com/service.php (跨域)

www.abc.com/index.html调用www.abc.com:81/service.php (跨域)

www.abc.com/index.html调用https://www.abc.com/service.php(跨域) 没有写协议，默认是http协议

主域名与子域名

主域名

abc.com

子域名

www.a bc.com

bbs.abc.com

beijing.bbs.abc.com

haidian.beijing.bbs.abc.com

处理跨域方法一 ——代理

通过在同域名的web服务器端创建一个代理:

北京服务器(域名: www.beijjing.com )

上海服务器(域名: www.shanghai.com )

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

( www.beijing.com/proxy-shanghaiservice.php )来调用上海服务器

( www.shanghai.com/service.php )的服务,然后再把响应结果返回给前端,这样前端调用北京同域名的服务就和调用上海的服务效果相同了。

处理跨域方法二 ——JSONP

jQuery的AJAX方法本身就支持JSONP的处理方式

只能对GET请求起到效果，不能改造POST请求。

注意：JSONP的方式是不支持POST请求的

JSONP可用于解决主流浏览器（GET请求）的跨域数据访问的问题。

在www.aaa.com页面中:

<script>
function jsonp(json){
alert(json["name"]);
}
</script>
//script标签可以向不同的域名提交HTTP请求
//载入另一个域名的jsonp.js
<script src= "http://www.bbb.com/jsonp.js"> </script>

在www.bbb.com页面中:

jsonp({' name':'洪七','age':24));

这种方法是借助script标签节点可以跨域访问的特性

处理跨域方法三 ——XHR2

HTML5提供的XMLHttpRequest Level2已经实现了跨域访问以及其他的一些新功能

IE10以下的版本都不支持

在服务器端做一些小小的改造即可:

//*表示所有域都可以访问，也可以设置特定域名
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow- Methods:POST,GET');