Ajax跨域基础（一）

版权声明：本文为 [onefine] 原创文章，转载请注明出处： https://blog.csdn.net/jiduochou963/article/details/89480325

什么是跨域

一个域名地址的组成：

• 当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。
• 不同域之间相互请求资源，就算做“跨域”

比如： http://www.abc.com/index.html 请求 http://www.efg.com/service.jsp

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

主域名：
				abc.com
子域名：
				www.abc.com
				bbs.abc.com
				beijing.bbs.abc.com
				haidian.beijing.bbs.abc.com

处理跨域

1、方法一：代理

• 通过在同域名的web服务器端创建一个代理：
• 北京服务器（域名：www.beijing.com）
  上海服务器（域名：www.shanghai.com）
• 比如在北京的web服务器的后台
  （www.beijing.com/proxy-shanghaiservice.php）来调用上海服务器（www.shanghai.com/service.php）的服务，然后再把响应结果返回给前端，这样前端调用北京同域名的服务就和调用上海的服务效果相同了。

2、方法二：JSONP

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

在www.aaa.com页面中：

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

// 载入http://www.bbb.com/的jsonp.js文件
<script src="http://www.bbb.com/jsonp.js"></script>

理解：在www.aaa.com页面中声明，在http://www.bbb.com/调用。

在www.bbb.com页面中：

jsonp({'name':'onefine', 'age':24});

注意： jsonp不支持POST请求。

前端：

后台：

3、方法三：XHR2

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

• IE10以下的版本都不支持！
• 在服务器端中做一些小小的改造即可：

  header('Access-Control-Allow-Origin:*'); // *代表允许访问的主机，也可指定具体的主机
  header('Access-Control-Allow-Methods:POST, GET');  //允许通过POST和GET方法访问
  

后台：