Spring Boot 进阶-Spring Boot中如何解决跨域问题

在这里插入图片描述

什么是跨域问题

  浏览器出于安全考虑,会限制跨域访问,就是不允许跨域请求资源,要求协议,IP和端口必须都相同,其中有一个不同就会产生跨域问题,这就是同源策略。

  简单的说A应用只能访问A应用对应的后台返回的数据,B应用只能访问B应用后台的数据,如果A应用通过Ajax请求了B应用对应的后台数据的时候就会出现跨域的问题。但是在实际开发中,这种调用方式又是被大家广泛使用的。

非同源限制

  什么是非同源限制?浏览器为了安全限制了一些操作,限制了一些请求是无法访问非同源的操作的。

  • 无法读取非同源网页的Cookie、LocalStorage和IndexedDB
  • 无法获取到非同源网页的DOM
  • 无法向非同源地址发送Ajax请求操作

CORS技术

  为了解决上述问题,W3C提出了跨院资源共享方案,也就是CORS技术(Cross-Origin Resource Sharing)CORS 可以在不破坏现有规则的情况下,通过后端服务器实现CORS接口,从而实现跨域通信。CORS请求分为两类:简单请求和非简单请求,分别对跨域通信提供了支持操作。

什么是简单请求

  在CORS技术出现之前,在HTTP请求头中不能包含任何的自定义字段,而且HTTP请求信息也不能操作如下的一些

  • Accept
  • Accept_Language
  • Content_Language
  • Last-Event-ID
  • Content-Type(application/x-www-form-urlencoded、multipart/form-data、text/plain)

  根据对简单请求的的分析,CORS的策略是在请求时在请求头中增加一个Origin字段,服务器收到请求后,根据该字段判断是否允许该请求访问。

  • 如果允许,就在HTTP请求头信息中添加Access-Control-Allow-Origin字段,并且返回正确的字段
  • 如果不允许,就不加入该字段处理Access-Control-Allow-Origin字段,还有其他的字段可以描述CORS返回结果
  • Access-Control-Allow-Credentials:可选,用户是否可以发送、处理cookie。
  • Access-Control-Expose-Headers: 可选,可以让用户拿到的字段,有即可字段无论设置与否都可以获取到,包括Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。

什么是非简单请求

  对于非简单请求的跨源请求,浏览器会在真实请求发出前增加一次OPTION请求,称为预检请求。在预检请求将真实请求的信息,包括请求方法、自定义头字段、源信息添加到HTTP头信息字段中,询问服务器是否允许这样的操作。
  例如在一个GET请求中,与CORS相关的字段有:

  • 请求使用的HTTP方法 Access-Control-Request-Method
  • 请求中包含的自定义头字段Access-Control-Request-Headers

  服务器收到请求时,需要对Origin、Access-Control-Request-Method、Access-Control-Request-Headers 进行验证,验证通过后,会在返回HTTP头信息中添加如下的的内容

  • Access-Control-Allow-Origin:
  • Access-Control-Allow-Methods :真实请求允许的方法
  • Access-Control-Allow-Headers :服务器允许使用的字段
  • Access-Control-Allow-Credentials :是否允许用户发送、处理Cookie
  • Access-Control-Max-Age :预检请求的有效期,单位为秒,有效期内,不会重复发送预检请求

在Spring Boot中如何实现跨域

  对于CORS的跨域请求,主流的解决方案有如下几种

  • 添加跨域配置类
  • 重写WebMvcConfigurer
  • 使用@CrossOrigin注解
  • 手动设置响应头
  • 自定义过滤器

  对于前后端分离的项目还可以通过配置Nginx的方式实现跨域操作

  CorFilter / WebMvConfigurer / @CrossOrigin 需要 SpringMVC 4.2以上版本才支持,对应springBoot 1.3版本以上上面前两种方式属于全局 CORS 配置,后两种属于局部 CORS配置。如果使用了局部跨域是会覆盖全局跨域的规则

  所以可以通过 @CrossOrigin 注解来进行细粒度更高的跨域资源控制。其实无论哪种方案,最终目的都是修改响应头,向响应头中添加浏览器所要求的数据,进而实现跨域

添加跨域配置类

  新建一个全局的跨域配置文件,然后添加对应的Cors跨域信息,包括放行原始域、发送Cookie等操作,代码如下。

@Configuration
public class GlobalCorsConfig {
   

    @Bean
    public CorsFilter corsFilter() {
   
        //1. 添加 CORS配置信息
        CorsConfiguration config = new CorsConfiguration()
上一篇:前端接收到的日期格式为 2021-12-07T16:44:53.298+00:00 怎么办?


下一篇:echarts多折线按组分类控制显示隐藏