Springboot解决跨域问题——CORS支持

一、什么是跨域

1、产生原因

我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。

同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

同源策略限制以下几种行为：

（1）Cookie、LocalStorage 和 IndexDB 无法读取
（2）DOM 和 Js对象无法获得
（3）AJAX 请求不能发送

2、跨域类型

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

3、简单请求与非简单请求

（1）简单请求

简单请求就是使用设定的请求方式请求数据。只要同时满足以下两大条件，就属于简单请求。

（1）请求方法是以下三种方法之一：HEAD、GET和POST
（2）HTTP的头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

（2）非简单请求

非简单请求则是在使用设定的请求方式请求数据之前，先发送一个 OPTIONS 请求，探测服务端是否允许客户端发送非简单请求。只有"预检"通过后才会再发送一次请求用于数据传输。

OPTIONS请求的信息：

（1）Access-Control-Allow-Headers
该字段是一个逗号分隔的字符串，指定浏览器CORS请求支持额外发送的头信息字段，上例是content-type。
（2）Access-Control-Allow-Method
该字段是必须的，用来列出浏览器的该次CORS请求用到的HTTP方法，上例是POST。
（3）Access-Control-Allow-Origin
指明服务器支持的跨域浏览器页面
（4）Allow
指明服务器支持的浏览器请求方法

二、解决办法

● 通过jsonp跨域
● document.domain + iframe跨域
● location.hash + iframe
● window.name + iframe跨域
● postMessage跨域
● 跨域资源共享（CORS）
● nginx代理跨域
●nodejs中间件代理跨域
● WebSocket协议跨域

在 JavaEE 开发中，最常见的前端跨域请求解决方案是 JSONP，但是 JSONP 只支持 GET 请求，这是很大缺陷。
CORS 支持多种HTTP请求方法，使用也很方便。

CORS 介绍

CORS 是一个 W3C 标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出 XMLHttpRequest 请求，从而克服了 AJAX 只能同源使用的限制。

CORS 需要浏览器和服务器同时支持。

浏览器端：

目前，所有浏览器都支持该功能（IE10以下不行）。整个 CORS 通信过程，都是浏览器自动完成，不需要用户参与。

服务端：

CORS 通信与 AJAX 没有任何差别，因此你不需要改变以前的业务逻辑。只不过，浏览器会在请求中携带一些头信息，我们需要以此判断是否允许其跨域，然后在响应头中加入一些信息即可。这一般通过过滤器完成即可。

预检请求

跨域请求会在正式通信之前，增加一次 HTTP 查询请求，称为"预检"请求（preflight）。
浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些 HTTP 动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的 XMLHttpRequest 请求，否则就报错。
一个“预检”请求的样板：

OPTIONS /cors HTTP/1.1 Origin: http://localhost:1111  			// 会指出当前请求属于哪个域（协议+域名+端口）。服务会根据这个值决定是否允许其跨域。
Access-Control-Request-Method: GET		// 用到的请求方式
Access-Control-Request-Headers: X-Custom-Header	// 用到的头信息 User-Agent:
Mozilla/5.0...

预检请求的响应：

HTTP/1.1 200 OK 
Date: Mon, 01 Dec 2008 01:15:39 GMT 
Server: Apache/2.0.61 (Unix) 
Access-Control-Allow-Origin: http://localhost:1111	  // 可接受的域，是一个具体域名或者*（代表任意域名）
Access-Control-Allow-Credentials: true				  // 是否允许携带cookie，默认情况下，cors不会携带cookie，除非这个值是true
Access-Control-Allow-Methods: GET, POST, PUT		  // 允许访问的方式
Access-Control-Allow-Headers: X-Custom-Header		  // 允许携带的头
Access-Control-Max-Age: 1728000						  // 本次许可的有效时长，单位是秒，过期之前的ajax请求就无需再次进行预检了 
Content-Type: text/html; charset=utf-8 
Content-Encoding: gzip 
Content-Length: 0 
Keep-Alive: timeout=2, max=100 
Connection: Keep-Alive 
Content-Type: text/plain 

三、springboot 跨域资源共享（CORS）解决跨域

1、注解方式 @CrossOrigin

（1）在controller的方法上直接使用该注解

	@CrossOrigin(origins = "http://localhost:8080",maxAge = 3600,allowedHeaders="*")
	@RequestMapping(value = "/ajax",method = RequestMethod.POST)
    public String zhuce(@RequestBody Map<String,String> user){
        System.out.println(user.get("yhm"));
        System.out.println(user.get("pwd"));
        return "跨域成功";
    }

这种配置方式是一种细粒度的配置，可以控制到每一个方法上。

① origins表示支持的域，若支持所有域可以设置为origins = “*”。（origins也可以用value代替）
② maxAge表示跨域探测请求的有效期，单位是秒。
③ allowedHeaders：表示允许的请求头，*表示所有的请求头都允许。

注：若后端使用@CrossOrigin页面还显示跨域问题，则在请求中加入withCredentials:false，

（2）在控制器类上加注解，对此类的所有接口有效

	@CrossOrigin(origins = "http://localhost:8080",maxAge = 3600,allowedHeaders="*")
	@RestController
	public class SpringBootCorsTestApplication {
    
	}

2、全局配置

（1）配置类 JavaConfig

	@Configuration
	public class MyWebMvcConfig implements WebMvcConfigurer {
		@Override
    	public void addCorsMappings(CorsRegistry registry) {
        	registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "HEAD", "POST","PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .exposedHeaders("access-control-allow-headers",
                        "access-control-allow-methods",
                        "access-control-allow-origin",
                        "access-control-max-age",
                        "X-Frame-Options")
                .allowCredentials(false).maxAge(3600);
    }
}

这种配置方式是全局性的，controller中的所有方法都遵循该配置。

全局配置需要自定义类实现WebMvcConfigurer接口，并实现接口中的addCorsMappings方法。

addmapping表示对哪种格式的请求路径进行跨域处理；
allowedOrigins表示支持的域，
allowedHeaders表示允许的请求头（默认允许所有的请求头），
allowedMethods表示允许的请求方法（默认是GET、POST和HEAD；*表示支持所有的请求方法），
maxAge表示请求探测的有效期。

（2）基于过滤器的CORS支持

作为上述其他方法的替代方案，Spring Framework还提供了CorsFilter。在这种情况下，您可以在Spring Boot应用程序中声明过滤器来配置跨域：

@Configuration
public class MyConfiguration {    

	@Bean
    public FilterRegistrationBean corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOrigin("*");
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
        bean.setOrder(0);       
        return bean;
    }
}

或者

@Configuration
public class CorsConfig {

    @Bean
    public CorsWebFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(new PathPatternParser());
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsWebFilter(source);
    }

    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        //在生产环境上最好指定域名，以免产生跨域安全问题
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.setAllowCredentials(true);
        return corsConfiguration;
    }
}