首页 > > 程序设计 > Java技术 >

记一次springMVC的跨域解决方案

2019-05-18 07:09:19来源：博客园阅读 ()

日期：2019年5月18日

事情原因：由于微信小程序的开发只有测试环境，而后台提供借口的环境是开发环境；两个环境的域名不同，导致前端开发产生了跨域问题；

理论概念：

　　1、同源策略：同源策略是浏览器的安全基石，存储在浏览器中的数据（cookie）必须在同域（相同域名）下才能任意的读取，而非同域下的浏览器资源是不允许任意操作的。即同源策略下，非同源的网站之间不能发送Ajax请求；

如果没有同源策略，会导致浏览器中的数据可以被任何来源请求进行访问与资源操作，存储在浏览器中的数据就没有任何安全可言；

2、域名：相同域名（www.baidu .com；所有的请求都来自于这个域名下，即为同域下）；

不同域名（www.baidu.com，www.google.com；来自google的请求不能直接操作baidu域下的资源）；

3、同源：两个页面的【协议】、【端口（如果指定了）】、【主机】都相同，则这两个页面具有相同的源。有一个元素不同，则是不同源的；

　　4、跨域资源共享（CORS：Cross-Origin Resource Sharing）:1）它是一份浏览器技术的规范，提供Web服务从不同域传来沙盒脚本的方法，泳衣避开浏览器的同源策略，JSONP模式的现代版（相关JSONP的知识请自己查阅，本文不再做解释说明）；

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　2）实现思路是使用自定义的HTTP头部制定一个可以互相认可的约定（例如浏览器给服务器传送一个头信息A，服务器给浏览器传送一个头信息B，就可以不受同源策略的限制），从而决定请求与响应成功与否；

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　3）CORS不关心安全问题，只解决资源共享的问题；安全性可以从请求时效性，token验证，IP验证，来源验证等方面考虑安全问题；

　　5、CORS与JSONP的区别：1）JSONP只能实现GET请求，而CORS支持所有的请求；

　　　　　　　　　　　　　　 2）使用CORS，前端开发者可以使用普通的XMLHttpRequest发起的请求和响应的数据，比JSONP有更好的错误处理；

　　　　　　　　　　　　　　 3）JSONP主要被版本比较老的浏览器支持，这些老版本的浏览器往往不支持CORS（IE6,IE7,Open mini），而绝大多数现代浏览器都已经支持了CORS；

　　6、注：在跨域请求中，请求是可以发送到服务器的，服务器也可以响应数据，但服务器响应到浏览器的数据，浏览器拒绝解析（不太确定是拒绝接受还是拒绝解析？），导致的资源无法共享；

解决方案：只要解决跨域资源共享即可，CROS解决方案主要有以下几种：

　　1、自定义CORSFilter(Intercepter)：适用于设置单一的（全部）授权访问，所有配置固定，操作简单，不根据请求类型做不同的处理，粒度比较大；

 1 @Bean
 2 public FilterRegistrationBean corsFilter() {
 3     UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
 4     CorsConfiguration config = new CorsConfiguration();
 5     config.setAllowCredentials(true);    config.addAllowedOrigin("http://localhost:9000");
 6     config.addAllowedOrigin("null");
 7     config.addAllowedHeader("*");
 8     config.addAllowedMethod("*");
 9     source.registerCorsConfiguration("/**", config); // CORS 配置对所有接口都有效
10     FilterRegistrationBean bean = newFilterRegistrationBean(new CorsFilter(source));
11     bean.setOrder(0);
12     return bean;
13 }

View Code

　　2、Nginx代理配置（配置在location中）

 1 #
 2 # Wide-open CORS config for nginx
 3 #
 4 location / {
 5      if ($request_method = 'OPTIONS') {
 6         add_header 'Access-Control-Allow-Origin' '*';
 7         add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
 8         #
 9         # Custom headers and headers various browsers *should* be OK with but aren't
10         #
11         add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
12         #
13         # Tell client that this pre-flight info is valid for 20 days
14         #
15         add_header 'Access-Control-Max-Age' 1728000;
16         add_header 'Content-Type' 'text/plain charset=UTF-8';
17         add_header 'Content-Length' 0;
18         return 204;
19      }
20      if ($request_method = 'POST') {
21         add_header 'Access-Control-Allow-Origin' '*';
22         add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
23         add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
24      }
25      if ($request_method = 'GET') {
26         add_header 'Access-Control-Allow-Origin' '*';
27         add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
28         add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
29      }
30 }

View Code（细粒度配置）

1 #js跨域支持
2                 #add_header 'Access-Control-Allow-Origin' '*';
3                 #add_header 'Access-Control-Allow-Credentials' 'true';
4                 #add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Requested-With';
5                 #add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';

View Code（粗粒度配置）

　　3、使用spring框架提供的注解@CrossOrigin

　　　　1)第一种情况，对接口的粒度进行配置　　　　

1 @CrossOrigin(origins = {"http://localhost:9000", "null"})
2 @RequestMapping(value = "/test", method = RequestMethod.GET)
3 public String greetings() {
4     return "{\"project\":\"just a test\"}";
5 }

View Code（接口）

　　　　2）第二种情况，对类的粒度进行配置　　

1 @CrossOrigin(origins = {"http://localhost:9000", "null"})
2 @RestController
3 @SpringBootApplication
4 public class SpringBootCorsTestApplication {
5     // xxx
6 }

View Code

　　4、全局配置

 1 @Configuration
 2 public class WebConfig extends WebMvcConfigurerAdapter {
 3 
 4     @Override
 5     public void addCorsMappings(CorsRegistry registry) {
 6         registry.addMapping("/**")
 7                 .allowedOrigins("http://localhost:9000", "null")
 8                 .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
 9                 .maxAge(3600)
10                 .allowCredentials(true);
11     }
12 }