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");
}

}

参考资料

[^1 ] 跨域讲解学习一（Ajax跨域完全讲解）