跨域讲解学习一（Ajax跨域完全讲解）

1、为什么会发生跨域问题？

　　1、浏览器限制；

　　2、跨域（域名，端口不一样都是跨域）；

　　3、XHR（XMLHttpRequest请求）；同时满足以上三个条件就会产生跨域。

2、解决跨域的方法

　　(1)、从浏览器出发，允许浏览器跨域。

　　　　思路：通过命令行修改浏览器启动参数，使得浏览器不进行跨域检查，从而允许跨域

　　　　方法：命令行参数启动浏览器后添加参数--disable-web-security

　　　　例：chrome --disable-web-security

　　　　　　--disabl-web-security参数的作用是禁止浏览器进行跨域检查

　　　　但是，这种方法有三个缺点：

　　　　　　a.每次启动浏览器都需要通过命令行启动，太过繁琐

　　　　　　b.该方法会导致安全性方面的问题

　　　　　　c.该方法是客户端方面的改动，在实际使用中，在每个客户端上都禁止浏览器进行跨域检查不太现实，所以实用性较低。

　　　　总的来说，该方法虽然可以解决跨域问题，但是价值不大。在实际项目中，主要对服务器端进行改动使得支持跨域。

　　(2)、从XHR（XMLHttpRequest）出发避免发生跨域

　　　　使用jsonp，由于jsonp请求是通过script的方式发送的（只有xhr的请求方式才有可能产生跨域问题）所以不会产生跨域问题

　　(3)、产生跨域后解决。

　　　　从被调用方考虑，有三种情况，分别是服务端创建Filter解决，nginx配置和apache配置。服务器实现需要注意两种情况，简单请求和非简单请求。简单请求是先执行请再验证，非简单请求是先验证再请求。

　　　　简单请求：

　　　　　　方法为get，head，post,请求header里面没有自定义头，Content-Type的值为以下几种 text/plain,multipart/form-data,application/x-www-form-urlencoded。

　　　　非简单请求：

　　　　　　put,delect方法的ajax请求，发送json格式的ajax请求，带自定义头的ajax请求。

　　　　简单请求处理方案：

　　　　　　在响应头中添加

　　　　　　Access-Control-Allow-Origin=“允许跨域的url”，即跨省域时，请求头Origin的值，所以一般是获取Origin的值；

　　　　　　Access-Control-Allow-Method=“*”，允许的方法。

　　　　非简单请求处理方案：

　　　　　　在响应头中添加

　　　　　　Access-Control-Allow-Origin=“允许跨域的url”，即跨域时，可以获取请求头Origin的值。

　　　　　　Access-Control-Allow-Method=“*”，允许的方法

　　　　　　Access-Control-Request-Headers=“Content-Type,自定义的header的key”。

　　　　带cookies的跨域解决：

　　　　　　在响应头添加

　　　　　　Access-Control-Allow-Credentials="true"，允许使用cookies

3、JSONP如何解决跨域

　　（1）.什么是JSONP?

　　　　JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，而JSONP（JSON with Padding）则是JSON 的一种“使用模式”，通过这种模式可以实现数据的跨域获取。

　　（2）.JSONP处理跨域的原理

　　　　在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的，但img、iframe、script等标签是个例外，这些标签可以通过src属性请求到其他服务器上的数据。利用script标签的开放策略，我们可以实现跨域请求数据，当然，也需要服务端的配合。当我们正常地请求一个JSON数据的时候，服务端返回的是一串JSON类型的数据，而我们使用JSONP模式来请求数据的时候，服务端返回的是一段可执行的JavaScript代码。

举例：

　　假如需要从服务器（http://www.a.com/user?id=123）获取的数据如下：{"id": 123, "name" : 张三, "age": 17}

　　那么，使用JSONP方式请求（http://www.a.com/user?id=123?callback=foo）的数据将会是如下： foo({"id": 123, "name" : 张三, "age": 17});

　　当然，如果服务端考虑得更加充分，返回的数据可能如下： try{foo({"id": 123, "name" : 张三, "age": 17});}catch(e){}

　　这时候我们只要定义一个foo()函数，并动态地创建一个script标签，使其的src属性为http://www.a.com/user?id=123?callback=foo：便可以使用foo函数来调用返回的数据了。

4、在JQuery中使用JSONP解决跨域:

　　Spring MVC实现过程：前台使用ajax的get请求，将dataType设为“jsonp”；服务器端创建一个类并继承抽象类AbstractJsonReponseBodyAdvice提供支持jsonp请求服务,最后加入注@ControllerAdivece

　　使用jsonp的弊端，只能使用get方式请求，服务器需要改动代码，发送的不是xhr请求。

（1）指定ajax请求的dataType属性为jsonp　　　

//调用方案一
$.ajax({
　　dataType: 'jsonp',
   url: 'http://www.a.com/user?id=123',
   success: function(data){
   　　//处理data数据
   }
});

//调用方案二

$.getJSON('http://www.a.com/user?id=123&callback=?',function(data){
    //处理data数据
});

//调用方案三

function foo(data){
　　//处理data数据
}
$.getJSON('http://www.a.com/user?id=123&callback=foo');

（2）服务器端创建支持jsonp请求服务类

package *;

import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.servlet.mvc.method.annotation.AbstractJsonpResponseBodyAdvice;

@ControllerAdvice
public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice {

    public JsonpAdvice() {
        // TODO Auto-generated constructor stub
        super("callback2");
    }
}

欢迎提问，共同学习......

lblog_b7xn6aes

跨域讲解学习一（Ajax跨域完全讲解）