序言:跨域资源共享向来都是热门的需求,使用CORS可以帮助我们快速实现跨域访问,只需在服务端进行授权即可,无需在前端添加额外设置,比传统的JSONP跨域更安全和便捷。
什么是跨域?
浏览器出于安全的考虑,使用 XMLHttpRequest对象发起 HTTP请求时必须遵守同源策略,否则就是跨域的HTTP请求,默认情况下是被禁止的。跨域HTTP请求是指A域上资源请求了B域上的资源,举例而言,部署在A机器上Nginx上的js代码通过ajax请求了部署在B机器Tomcat上的RESTful接口。
IP(域名)不同、或者端口不同、请求方式不同,都会造成跨域问题。为了解决跨域的问题,曾经出现过jsonp、代理文件等方案,应用场景受限,维护成本高,直到HTML5带来了CORS协议。
为什么要跨域?
为什么需要跨域,而不直接访问其他域下的资源呢?浏览器出于安全性考虑,使用的一种同源策略限制。
现在的安全框架,一般请求的时候header中大多都存个token,用这个token去正常访问A域是没问题的,如果又去访问了B域,把这个token带了过去,那么B域,或者说B网站就可以拿着你的token去A域下做一些操作,这就相当危险了。所以浏览器加上了所谓的浏览器同源策略限制。现在的微服务项目大多采用前后端分离的架构模式,需要从A域下访问B的资源(正常访问),就需要用到跨域,跨越这个限制了。
什么是CORS?
CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing),允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。它通过服务器增加一个特殊的Header[Access-Control-Allow-Origin]来告诉客户端跨域的限制,如果浏览器支持CORS、并且判断Origin通过的话,就会允许XMLHttpRequest发起跨域请求。
CORS工作原理
浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(预检请求)(not-so-simple request)。
简单的请求(通常指GET/POST/HEAD方式,并没有去增加额外的请求头信息)直接创建了跨域请求的XHR对象,而复杂的请求则要求先发送一个"预检"请求,待服务器批准后才能真正发起跨域访问请求。如下原理图:
CORS支持的头信息
Request Headers(请求头)
- Origin 表示发起跨域请求的原始域。
- Access-Control-Request-Method 表示发起跨域请求的方式,例如GET/POST。
- Access-Control-Request-Headers表示发起跨域请求的额外头信息。
~Response headers(响应头 )
- Access-Control-Allow-Origin 表示允许哪些原始域进行跨域访问。
- Access-Control-Allow-Credentials表示是否允许客户端获取用户凭据。
- Access-Control-Allow-Methods 表示允许哪些跨域请求的提交方式。
- Access-Control-Allow-Headers 表示跨域请求的头部的允许范围。
- Access-Control-Expose-Headers 表示允许暴露哪些头部信息给客户端。
- Access-Control-Max-Age 表示预检请求 [Preflight Request] 的最大缓存时间。
~ps:基于安全考虑,如果没有设置额外的暴露,跨域的通信对象XMLHttpRequest只能获取标准的头部信息。
SpringBoot解决跨域问题
SpringBoot可以基于Cors解决跨域问题,Cors是一种机制,告诉我们的后台,哪边(origin )来的请求可以访问服务器的数据。
四种方法
- 返回新的CorsFilter(全局)
- 重写WebMvcConfigurer(全局)
- 使用注解(@CrossOrigin)(局部)
- 手工设置响应头(HttpServletResponse )(局部)
~版本要求:CorsFilter / WebMvcConfigurer / @CrossOrigin 这三种方式需要SpringMVC 4.2 以上的版本才支持,对应SpringBoot 1.3 版本以上都支持这些CORS特性。
返回新的CorsFilter(全局跨域)
在任意配置类,返回一个新的CorsFilter Bean,并添加映射路径和具体的CORS配置信息。
@Configuration
public class CorsConfig {
@Bean
public CorsFilter corsFilter() {
//1.添加CORS配置信息
CorsConfiguration config = new CorsConfiguration();
//放行所有域
config.addAllowedOrigin("*"