Ajax如何实现跨域问题

一个域名的组成

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

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

• 当协议、子域名、主域名、端口号中任意一个不同时，都算作不同域。

• 不同域之间相互请求资源，就算作"跨域"。

同源策略

JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象——同源策略阻止从一个域
上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当
前Web页面的域相同。这意味着浏览器隔离来自不同源的内容，以防止它们之间的操作。这个
浏览器策略很旧，从 Netscape Navigator 2.0 版本开始就存在。

处理跨域的方式

1. 代理

   通过同域名的服务器创建一个代理——让 Web 页面向它源自的 Web 服务器请求数据，并且让 Web 服务器像代理一样将请求转发给真正的第三方服务器。如：

   北京服务器：www.beijing.com

   上海服务器：www.shanghai.com

   北京web服务器后台:www.beijing.com/proxy-shanghaiservice.php

   来调用上海服务器的服务:www.shanghai.com/service.php

   然后将响应结果返回给前端，这样前端调用背景同域名的服务就和调用上海的服务具有相同的效果。

2. 处理跨域方式二——JSONP(只支持GET请求)

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

3. 在www.aaa.com页面中：

     <script>
     function jsonp(json){
     alert(json["name"]);
     }
     </script>
     <script src="http;//www.bbb.com/jsonp.js"></script>

   在www.bbb.com页面中：

     jsonp({})

4. 处理跨域的方法三——XHR2

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

   *IE10以下的版本都不支持

   *在服务器端

    header('Access-Control-Allow-Origin:*');
    header('Access-Control-Allow-Methods:POST,GET');

　　　　例如：客户端的域名是client.runoob.com，而请求的域名是server.runoob.com。

　　　　如果直接使用ajax访问，会有以下错误：

 XMLHttpRequest cannot load http://server.runoob.com/server.php. No 'Access-Control-Allow-Origin' header is present on the requested resource.Origin 'http://client.runoob.com' is therefore not allowed access.

　　　　处理跨域的集中情况：

• 允许单个域名访问

　　指定某域名（http://client.runoob.com）跨域访问，则只需在http://server.runoob.com/server.php文件头部添加如下代码：

header('Access-Control-Allow-Origin:http://client.runoob.com');

• 允许多个域名访问

　　　指定多个域名（http://client1.runoob.com、http://client2.runoob.com等）跨域访问，则只需在http://server.runoob.com/server.php文件头部添加如下代码：

$origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : '';  

$allow_origin = array(
    'http://client1.runoob.com',
    'http://client2.runoob.com'
);  

if(in_array($origin, $allow_origin)){
    header('Access-Control-Allow-Origin:'.$origin);
} 

• 允许所有域名访问

　　允许所有域名访问则只需在http://server.runoob.com/server.php文件头部添加如下代码：

header('Access-Control-Allow-Origin:*'); 

---