CORS跨域请求

一、概念

　　这里说的 js 跨域是指通过 js 在不同的域之间进行数据传输或通信，比如用 ajax 向一个不同的域请求数据，或者通过 js 获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。

举例：

http://cas.qer.com
http://cart.qer.com

http://192.168.110/aa
http://192.168.112/aa

http://192.168.110/bb
https://192.168.110/bb

二、错误演示

①XMLHttpRequest是浏览器的底层对象，用来处理数据请求，这里报错说无法请求到该链接地址

②Access-Control-Allow-Origin是一个头信息，在跨域请求中首先要验证是否存在该头信息，如果不存在就无法跨域，默认情况下js是不允许跨域的

三、解决方案
注意：我们这里使用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：http://192.168.110/bb

四、代码实现

①后台代码（后台controller.java）

@RequestMapping("/addGoodsToCartList")

	//springMVC 的版本在 4.2 或以上版本，可以使用注解实现跨域
	@CrossOrigin(origins="http://localhost:9105",allowCredentials="true")
	
	public Result addGoodsToCartList(Long itemId, Integer num) {
	
		//-------------------设置响应头信息-------------------------
		
		//设置可以访问的域（当不用操作cookie时，添加下面第一句话就行）
		//注意：如果方法中不用操作cookie下面的地址可以写通配符“*”
		//response.setHeader("Access-Control-Allow-Origin", "http://localhost:9105");
		
		//设置允许携带凭证（当需要操作cookie时，需要再添加下面这句话）
		//response.setHeader("Access-Control-Allow-Credentials", "true"); 

			………………省略其它代码………………………………
}

②前端代码（前端controller.js）

	//添加商品到购物车
	$scope.addToCart=function(){
		//alert('skuid:'+$scope.sku.id);
		//跨域跳转页面
		$http.get('http://localhost:9107/cart/addGoodsToCartList.do?itemId='
				+$scope.sku.id+'&num='+$scope.num,{'withCredentials':true}).success(
						function(response){
							if (response.success) {
								location.href="http://localhost:9107/cart.html"
							}else{
								alert(response.message);
							}
						}
				);
		
	}
	注意：如果要跨域操作cookie，前端控制层也要声明{'withCredentials':true}，允许cookie携带凭证