ajax跨域请求的解决方案

开篇之前必须理解两个概念："同源策略"和“跨域”

同源策略：同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止                   某个文档或脚本从多个不同源装载。
                  这里的同源指的是：同协议，同域名和同端口。

跨域：一个域名的组成  http://     www     .     aaa.com ：8080  /      js/jquery.js

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

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

       javascript出于安全方面的考虑，不允许跨域调用其他页面的对象！

常用的三种解决方案：

1、代理（属于后台范畴）

    在同域名的web服务器端创建一个代理，代理去调用其他域的资源，然后返回给前端，其效果是相同的。。。

2、jsonp(属于jquery，并且只支持 “GET” 请求，但不支持 “POST” 请求)

<script>

 

　　functionjsonp( json ){

 

　　　　document.write( json.name ); 

 

}

 

<script>

 

<script src="http://www.bbb.com/index.php"></script>

在www.bbb.com页面中：

　　jsonp({ "name":"某某某","age":20 });

当GET请求从http://www.bbb.com/index.php返回时，可以返回一段JavaScript代码，这段代码会自动执行，调用函数jsonp(json)，并带有参数传进来。。。

使用jquery的jsonp来实现跨域访问：

2. $.ajax({  
3.              type: "get",  
4.              async: false,  
5.              url: "http://abc.com:8080/data.php",  
6.              dataType: "jsonp",  
7.              jsonp: "callback",  //服务端用于接收callback调用的function名的参数
8.              jsonpCallback:"flightHandler",  //callback的function名称
9.              success: function(da){  
10.                 
11.              },  
12.              error: function(e){  
13.                  
14.              }  
15.          });  

注意：凡是拥有"src"这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>

3、XHR2(ie10以下浏览器不支持)

“XHR2” 全称 “XMLHttpRequest Level2” 是HTML5提供的方法，对跨域访问提供了很好的支持，并且还有一些新的功能。

* 只需要在服务器端头部加上下面两句代码：

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

　　header( "Access-Control-Allow-Methods:POST,GET" );

谷歌浏览器跨域技巧（开发中常用）：

1、谷歌快捷方式上右击-属性

2、打开属性窗口，切换到快捷方式选项卡下面

3、在目标路径的后面添加 --disable-web-security（chrome.exe与--disable之间有一个空格）

4、点击应用，然后点击确定关闭窗口。重新打开浏览器，浏览器提示"您使用的是不受支持的命令行标记： --disable-web-security。稳定性和安全性会有所下降"，说明设置成功。

跨域方式详解：：：

https://segmentfault.com/a/1190000003642057