CORS跨域解决方案 跨域请求问题

跨域解决方案 跨域请求问题

一丶对不同域的认知

​ 当两个应用协议,主机地址(或域名),端口其中有一项不同,我们便认为他们的域是不同的.

二丶js跨域请求

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

​ 目的是可与ajax请求只能同源的问题.

三丶在跨域请求中未经处理遇到的页面控制台异常

​ XMLHttpRequest cannot load (请求另外域的链接eg:http://…)

​ No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:9100’ is therefore not allowed access. The response had HTTP status code 400.

四丶针对跨域异常的解决方案CORS

• ​ CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

• ​ 它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

• 请求过程示意图

  ​ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wWoVzU6x-1582170509746)(C:\Users\86132\AppData\Roaming\Typora\typora-user-images\image-20200216155244469.png)]

Preflight Request：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kC3CoAeD-1582170509748)(C:\Users\86132\AppData\Roaming\Typora\typora-user-images\image-20200216155331400.png)]

服务器端给我们返回一个Preflight Response:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4jRr9B29-1582170509753)(C:\Users\86132\AppData\Roaming\Typora\typora-user-images\image-20200216155400359.png)]

五丶项目Controller实现被跨域请求(使其能接受跨域请求)\

• Controller中被访问的RequestMapping链接中,在响应头中设置两个头信息

  response.setHeader("Access-Control-Allow-Origin", "http://localhost:9105");
  response.setHeader("Access-Control-Allow-Credentials", "true");
  

  • 注意 *:Access-Control-Allow-Origin*是****HTML5****中定义的一种解决资源跨域的策略。

  他是通过服务器端返回带有Access-Control-Allow-Origin标识的Response header，用来解决资源的跨域权限问题。

  • 使用方法就是在response相应头中添加该响应头,value值可以为任意值(一般设置为访问的IP和端口).当为任意值的时候可以用*代替.

  • Access-Control-Allow-Credentials:该响应头为是否操作cookie,默认是操作cookie的为true值.当该值为true的时候,第一个响应头Access-Control-Allow-Origin不能为*,cookie操作不明确所以不能为**.

• 在被访问端设置好头信息之后,访问ajax请求的时候应该多加一个参数:{‘withCredentials’:true},该参数的目的是使服务器同意发送Cookie.

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

  示例:

  $scope.addToCart=function(){
  	$http.get('http://localhost:9107/cart/addGoodsToCartList.do?itemId='
  	+ $scope.sku.id +'&num='+$scope.num,{'withCredentials':true}).success(
  			function(response){
  				.......				 
  			}				
  	);		
  }
  

• 此时便可以实现跨域请求了.

六丶SpringMVC注解实现跨域

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

@CrossOrigin(origins="http://localhost:9105",allowCredentials="true")

注意: allowCredentials=“true” ,默认为true,可以缺省.

七丶总结

s=“true”)

**注意:**  allowCredentials="true" ,默认为true,可以缺省.

### 七丶总结

​	上方是对CORS跨域请求简单应用的总结,还有其他其中跨域解决方案,没有最好的,只有最合适的.http://www.imooc.com/article/291931该博文有对8种跨域解决方案的概述,引用一下哦 ~~