SpringBoot2.x系列教程26--SpringBoot对CORS跨域访问的处理实现

前言

我们在前后端分离的开发模式中，H5前端调用后端的URL接口，一般都是采用Ajax来实现调用，但是浏览器对Ajax的调用会有跨域的限制，这会导致调用后端接口失败。

What？你都不知道什么是跨域？那.....

你就看看本文吧！本篇文章中，我会给大家讲解同源策略、跨域访问，以及CORS跨域访问的解决方案，以及在SpringBoot中如何实现跨域访问。

一. 跨域问题简介

1. 什么是跨域访问？

JavaScript出于安全方面的考虑,做了一个同源策略的限制，也就是说不允许跨域访问其他资源，更通俗的说就是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。

2. 什么是同源策略？

所谓的同源是指域名、协议、端口均为相同。

举例来说，http://www.yiyige.com/dir/syc.html这个网址，协议是http://，域名是www.yiyige.com，端口是80(默认端口可以省略)。

3. 同源策略的作用

同源政策的目的是为了防止恶意网站通过冒充用户来窃取用户的数据信息，同源策略提高了攻击成本。

同源策略限制了以下行为:

• Cookie、LocalStorage 和 IndexDB 无法读取；
• DOM 和 JS 对象无法获取；
• Ajax请求发送不出去。

4. 怎样算是跨域访问？

如下相对http://store.company.com/dir/page.html同源检测的示例:

也就是说如果域名、协议、端口三者之间，如果有一个不同，则认为不是一个网站，则会存在跨域问题。

5. 解决跨域限制的方法

• 跨域资源共享 CORS;
• 使用ajax的jsonp;
• 使用jQuery的jsonp插件;
• document.domain + iframe 跨域;
• window.name + iframe 跨域;
• location.hash + iframe 跨域;
• postMessage跨域;
• WebSocket协议跨域;
• node代理跨域;
• nginx代理跨域。

二. CORS跨域解决方案

本章节我将带领大家，在SpringBoot项目利用CORS方案，来解决跨域方案。

1. CORS简介

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。

它允许浏览器向跨源(协议 + 域名 + 端口)服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持。它的通信过程，都是浏览器自动完成的，不需要用户参与。

对于开发者来说，CORS通信与同源的AJAX/Fetch通信没有差别，代码完全一样。

浏览器一旦发现请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

2. CORS请求分类

浏览器将CORS请求分成两类:

简单请求（simple request）和非简单请求（not-so-simple request）。

• 简单请求:浏览器发出CORS简单请求，只需要在头信息之中增加一个Origin字段。反之，就是非简单请求。
• 非简单请求:
  浏览器发出CORS非简单请求，会在正式通信之前，增加一次OPTIONS查询请求，称为"预检"请求(preflight)。浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。简单请求就是HEAD、GET、POST请求，并且HTTP的头信息不超出以下几种字段:Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type

注:

Content-Type只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

所以实现CORS很简单，就是在服务端加一些响应头，并且这样做对前端来说是无感知的，很方便。

3. 响应头详解

• Access-Control-Allow-Origin

该字段是必填字段。它的值要么是请求时Origin字段的具体值，要么是一个*，表示接受任意域名的请求。

• Access-Control-Allow-Methods

该字段是必填字段。它的值是逗号分隔的一个具体的字符串或者*，表明服务器支持的所有跨域请求的方法。

注意：

返回的是所有支持的方法，而不单是浏览器请求的那个方法，这是为了避免多次"预检"请求。

• Access-Control-Expose-Headers

该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。
如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。

• Access-Control-Allow-Credentials

该字段可选。它的值是一个布尔值，表示是否允许发送Cookie. 默认情况下，不发生Cookie，即：false。对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json，这个值只能设为true。如果服务器不要浏览器发送Cookie，删除该字段即可。

• Access-Control-Max-Age

该字段可选，用来指定本次预检请求的有效期，单位为秒。在有效期间，不用发出另一条预检请求。

注意：

如果在开发中，发现每次发起请求都是两条，一次OPTIONS，一次正常请求。注意是每次，那么就需要配置Access-Control-Max-Age，避免每次都发出预检请求。

4. SpringBoot中跨域访问的实现方案

如果我们想在SpringBoot中解决跨域问题，可以有如下3种具体的实现方案。

• 全局配置实现方案；
• 基于过滤器的实现方案；
• @CrossOrigin注解实现方案。

接下来我就分别利用这3种实现方案来解决跨域问题。

三. 全局配置实现方案

我先来给大家讲解一下第一种全局配置的实现方案，开发时一般都是采用这种解决办法。其实代码很简单，我这里直接把核心代码粘贴如下，其余无关代码省略了。

packagecom.yyb.boot.config;
importorg.springframework.context.annotation.Configuration;
importorg.springframework.web.servlet.config.annotation.CorsRegistry;
importorg.springframework.web.servlet.config.annotation.WebMvcConfigurer;
/*** @Description Description* @Author 一一哥Sun* @Date Created in 2020/3/28** 注意: WebMvcConfigurerAdapter这个类,@deprecated as of 5.0 {@link WebMvcConfigurer} has default methods (made*  possible by a Java 8 baseline) and can be implemented directly without the*  need for this adapter.*  WebMvcConfigurerAdapter这个类从5.0以后就过失了,5.0之后直接实现WebMvcConfigurer接口就行.**  这是一种全局配置的实现方式,一般都是这种解决办法.*/@ConfigurationpublicclassCorsConfigimplementsWebMvcConfigurer {
@OverridepublicvoidaddCorsMappings(CorsRegistryregistry) {
//针对的映射registry.addMapping("/**")
//针对的origin域名                .allowedOrigins("*")
//针对的方法                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
//是否允许发送Cookie                .allowCredentials(true)
//从预检请求得到相应的最大时间,默认30分钟                .maxAge(3600)
//针对的请求头                .allowedHeaders("*");
    }
}

四. 基于过滤器的实现方案

接下来我再给大家讲解第2种解决方案，该方式是基于过滤器来实现的，简单明了。

packagecom.yyb.boot.filter;
importorg.springframework.context.annotation.Configuration;
importjavax.servlet.*;
importjavax.servlet.annotation.WebFilter;
importjavax.servlet.http.HttpServletResponse;
importjava.io.IOException;
/*** @Description Description* @Author 一一哥Sun* @Date Created in 2020/3/28** 基于过滤器的实现方式,简单明了.*/@Configuration@WebFilter(filterName="CorsFilter")
publicclassCorsFilterimplementsFilter {
@OverridepublicvoiddoFilter(ServletRequestservletRequest, ServletResponseservletResponse, FilterChainfilterChain) throwsIOException, ServletException {
HttpServletResponseresponse= (HttpServletResponse) servletResponse;
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, PATCH, DELETE, PUT");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
filterChain.doFilter(servletRequest, servletResponse);
    }
}

五. @CrossOrigin注解实现方案

最后我再利用@CrossOrigin注解来解决跨域问题，该方式实现起来更为简单。

packagecom.yyb.boot.web;
importorg.springframework.web.bind.annotation.CrossOrigin;
importorg.springframework.web.bind.annotation.GetMapping;
importorg.springframework.web.bind.annotation.RestController;
/*** @Description Description* @Author 一一哥Sun* @Date Created in 2020/3/28** 以@CrossOrigin注解方式实现跨域访问.*/@RestControllerpublicclassUserController {
@CrossOrigin(origins="http://localhost:8088")
@GetMapping("/msg")
publicStringshowMsg() throwsException {
return"success";
    }
}

结语

至此，壹哥 就采用了3种方式解决了我们前后端分离开发时可能存在的跨域问题。另外对于以上三种实现方案来说，其实都可以解决跨域问题，其中最常用的是第1种和第2种方案。但是如果你的项目中3种方案同时都采用了的话，SpringBoot会遵循就近原则来进行匹配。