跨域请求的2种应用场景和2种解决方案

应用场景

• 1.第一种是： 前端jquery，后端springmvc4.2
• 2.第二种是： 前端angularjs，后端springmvc4.2

解决方案

• 1.第一种场景我们用jsonp方式解决
• 2.第二种场景我们用CORS方式解决

示例:

jsonp+springmvc4.2
jsonp请求，原生js原理图

图的上半部分展示的是传统跨域请求，这种请求我们是获取不到Response数据的，下半部分是介绍jsonp跨域获取数据的方案的。我们现在要跨域获取信息的js当中添加一个函数，该函数有返回值参数data，发起跨域请求的一端引入服务端定义好的一个js文件，请求的参数中是带callback回调函数的，并且callback=mycall中的"mycall"一定是与我们添加的那个函数的名称一致的，服务端接收到请求，就进行响应，并且判断参数中是否有callback参数，如果有callback参数的话，就对要返回的数据进行处理，加工成一段js代码（很简单，就是把一个json串包装成一个js函数，如下图mycall({id:1,name:z});）然后响应，js本来就是要请求访问服务端的一个js文件，现在返回的也是js代码，于是浏览器将不再进行拦截，由于返回的是js代码，而且js语句有个特点就是，一旦响应到浏览器端便立即执行，我们已经添加了该函数，于是便调用我们添加的那个函数，我们只需把数据做下处理并进行展示就可以了！！！

jsonp请求，juquey实现原理图

下面我们便来实现jsonp请求，上图所介绍的方法是比较复杂的，如果我们用jquery的话，如下图所示。

客户端

服务端2种写法:

cors解决方案 angularjs+sprngmvc4.2

cors原理:
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
请求过程如下图:

Preflight Request：
然后服务器端给我们返回一个Preflight Response
Access-Control-Allow-Origin
Access-Control-Allow-Origin是HTML5中定义的一种解决资源跨域的策略。
他是通过服务器端返回带有Access-Control-Allow-Origin标识的Response header，用来解决资源的跨域权限问题。
使用方法，在response添加 Access-Control-Allow-Origin，例如
Access-Control-Allow-Origin:www.google.com
也可以设置为 * 表示该资源谁都可以用

前端代码

CORS请求默认不发送Cookie和HTTP认证信息。如果要把Cookie发到服务器，一方面要服务器同意，指定Access-Control-Allow-Credentials字段。另一方面，开发者必须在AJAX请求中打开withCredentials属性。否则，即使服务器同意发送Cookie，浏览器也不会发送。或者，服务器要求设置Cookie，浏览器也不会处理。

后端写法1：

后端写法2:

springMVC的版本在4.2或以上版本，可以使用注解实现跨域, 我们只需要在需要跨域的方法上添加注解@CrossOrigin即可

allowCredentials=“true” 可以缺省