SpringBoot 跨域问题的解决方案

什么是跨域?

定义:浏览器从一个域名的网页取请求另一个域名下的东西。通俗点说,浏览器直接从A域访问B域中的资源是不被允许的,如果想要访问,就需要进行一步操作,这操作就叫“跨域”。例如,你从百度的页面,点击一个按钮,请求了新浪的一个接口,这就进行了跨域。不单单只有域名不同就是跨域,域名、端口、协议其一不同就是不同的域,请求资源需要跨域。

为什么要跨域?

为什么需要跨域,而不直接访问其他域下的资源呢?这是浏览器的限制,专业点说叫浏览器同源策略限制。主要是为了安全考虑。现在的安全框架,一般请求的时候header中不是都存个token嘛,你要是用这个token去正常访问A域下的东西是没问题的,然后又去访问了B域,结果阴差阳错的还带着这个token,那么B域,或者说B网站是不是就可以拿着你的token去A域下做点什么呢,这就相当危险了。所以浏览器加上了所谓的浏览器同源策略限制。但是为了我们真的需要从A域下访问B的资源(正常访问),就需要用到跨域,跨越这个限制了。

SpringBoot解决跨域问题

SpringBoot可以基于Cors解决跨域问题,Cors是一种机制,告诉我们的后台,哪边(origin )来的请求可以访问服务器的数据。
全局配置

配置实例如下:

@Configuration
public class CorsConfig implements WebMvcConfigurer {

  @Override
  public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
      .allowedOrigins("*")
      .allowCredentials(true)
      .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
      .maxAge(3600);
  }
}

首先实现了WebMvcConfigurer 接口,WebMvcConfigurer 这个接口十分强大,里面还有很多可用的方法,在SpringBoot2.0里面可以解决WebMvcConfigurerAdapter曾经的部分任务。其中一个方法就是addCorsMappings(),是专门为开发人员解决跨域而诞生的接口。其中构造参数为CorsRegistry。

看下CorsRegistry源码,十分简单:

public class CorsRegistry {

  private final List<CorsRegistration> registrations = new ArrayList<>();

  public CorsRegistration addMapping(String pathPattern) {
   CorsRegistration registration = new CorsRegistration(pathPattern);
   this.registrations.add(registration);
   return registration;
  }

  protected Map<String, CorsConfiguration> getCorsConfigurations() {
   Map<String, CorsConfiguration> configs = new LinkedHashMap<>(this.registrations.size());
   for (CorsRegistration registration : this.registrations) {
     configs.put(registration.getPathPattern(), registration.getCorsConfiguration());
   }
   return configs;
  }

}

可以看出CorsRegistry 有个属性registrations ,按道理可以根据不同的项目路径进行定制访问行为,但是我们示例直接将pathPattern 设置为 /**,也就是说已覆盖项目所有路径,只需要创建一个CorsRegistration就好。getCorsConfigurations(),这个方法是获取所有CorsConfiguration的Map集合,key值为传入路径pathPattern。

回到示例代码CorsConfig中,registry对象addMapping()增加完传入路径pathPattern之后,return了一个CorsRegistration对象,是进行更多的配置,看一下CorsRegistration的代码,看看我们能配些什么?

public class CorsRegistration {
  //传入的路径
  private final String pathPattern;
  //配置信息实体类
  private final CorsConfiguration config;
  //构造方法
  public CorsRegistration(String pathPattern) {
   this.pathPattern = pathPattern;
   //原生注释看到了一个 @CrossOrigin 这个注解,待会看看是什么
   // Same implicit default values as the @CrossOrigin annotation + allows simple methods
   this.config = new CorsConfiguration().applyPermitDefaultValues();
  }
  //允许哪些源网站访问,默认所有
  public CorsRegistration allowedOrigins(String... origins) {
   this.config.setAllowedOrigins(Arrays.asList(origins));
   return this;
  }
  //允许何种方式访问,默认简单方式,即:GET,HEAD,POST
  public CorsRegistration allowedMethods(String... methods) {
   this.config.setAllowedMethods(Arrays.asList(methods));
   return this;
  }
  //设置访问header,默认所有
  public CorsRegistration allowedHeaders(String... headers) {
   this.config.setAllowedHeaders(Arrays.asList(headers));
   return this;
  }
  //设置response headers,默认没有(什么都不设置)
  public CorsRegistration exposedHeaders(String... headers) {
   this.config.setExposedHeaders(Arrays.asList(headers));
   return this;
  }
  //是否浏览器应该发送credentials,例如cookies Access-Control-Allow-Credentials
  public CorsRegistration allowCredentials(boolean allowCredentials) {
   this.config.setAllowCredentials(allowCredentials);
   return this;
  }
  //设置等待时间,默认1800秒
  public CorsRegistration maxAge(long maxAge) {
   this.config.setMaxAge(maxAge);
   return this;
  }

  protected String getPathPattern() {
   return this.pathPattern;
  }

  protected CorsConfiguration getCorsConfiguration() {
   return this.config;
  }

}

局部配置

刚才遇到一个@CrossOrigin这个注解,看看它是干什么的?

@Target({ ElementType.METHOD, ElementType.TYPE })
@Retention(RetentionPolicy.RUNTIME)
@Documented
public @interface CrossOrigin {

  /** @deprecated as of Spring 5.0, in favor of {@link CorsConfiguration#applyPermitDefaultValues} */
  @Deprecated
  String[] DEFAULT_ORIGINS = { "*" };

  /** @deprecated as of Spring 5.0, in favor of {@link CorsConfiguration#applyPermitDefaultValues} */
  @Deprecated
  String[] DEFAULT_ALLOWED_HEADERS = { "*" };

  /** @deprecated as of Spring 5.0, in favor of {@link CorsConfiguration#applyPermitDefaultValues} */
  @Deprecated
  boolean DEFAULT_ALLOW_CREDENTIALS = false;

  /** @deprecated as of Spring 5.0, in favor of {@link CorsConfiguration#applyPermitDefaultValues} */
  @Deprecated
  long DEFAULT_MAX_AGE = 1800

  /**
  * Alias for {@link #origins}.
  */
  @AliasFor("origins")
  String[] value() default {};

  @AliasFor("value")
  String[] origins() default {};

  String[] allowedHeaders() default {};

  String[] exposedHeaders() default {};

  RequestMethod[] methods() default {};

  String allowCredentials() default "";

  long maxAge() default -1;
}

这个注解可以作用于方法或者类上,实现局部跨域,你会发现除了设置路径(因为没必要了,都定位到局部了)其他的参数与全局类似。

小结

SpringBoot可以基于Cors解决跨域问题,可以设置全局跨域,也可以实现局部跨域,灵活配置方便使用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 详解SpringBoot多跨域请求的支持(JSONP)

    在我们做项目的过程中,有可能会遇到跨域请求,所以需要我们自己组装支持跨域请求的JSONP数据,而在4.1版本以后的SpringMVC中,为我们提供了一个AbstractJsonpResponseBodyAdvice的类用来支持jsonp的数据(SpringBoot接收解析web请求是依赖于SpringMVC实现的).下面我们就看一下怎么用AbstractJsonpResponseBodyAdvice来支持跨域请求. 使用AbstractJsonpResponseBodyAdvice来支持跨域请求

  • vue+springboot前后端分离实现单点登录跨域问题解决方法

    最近在做一个后台管理系统,前端是用时下火热的vue.js,后台是基于springboot的.因为后台系统没有登录功能,但是公司要求统一登录,登录认证统一使用.net项目组的认证系统.那就意味着做单点登录咯,至于不知道什么是单点登录的同学,建议去找一下万能的度娘. 刚接到这个需求的时候,老夫心里便不屑的认为:区区登录何足挂齿,但是,开发的过程狠狠的打了我一巴掌(火辣辣的一巴掌)...,所以这次必须得好好记录一下这次教训,以免以后再踩这样的坑. 我面临的第一个问题是跨域,浏览器控制台直接报CORS,

  • 详解Springboot+React项目跨域访问问题

    一.开发环境 框架:springboot 1.5.10.RELEASE 开发工具:IDEA JDK:1.8 前端框架:React 15.6.1 浏览器:Chrome浏览器 二.跨域问题 本地使用ajax访问localhost:8080端口时报错: Failed to load http://localhost:8080/test/test.do: No 'Access-Control-Allow-Origin' header is present on the requested resourc

  • 详解springboot设置cors跨域请求的两种方式

    1.第一种: public class CorsFilter extends OncePerRequestFilter { static final String ORIGIN = "Origin"; protected void doFilterInternal( HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOE

  • springboot+jsonp解决前端跨域问题小结

    现在咱们一起来讨论浏览器跨域请求数据的相关问题.说这样可能不是很标准,因为拒绝跨域请求数据并不是浏览器所独有的,之所以会出现跨域请求不了数据,是因为浏览器基本都实现了一个叫"同源策略"的安全规范.该规范具体是什么呢?我们在MDN上找到了一份资料,地址如下: 浏览器同源策略讲解 总的来说,当A网址和B网址在 协议 . 端口 . 域名 方面存在不同时,浏览器就会启动同源策略,拒绝A.B服务器之间进行数据请求. 说了同源策略,纸上得来终觉浅,绝知此事要躬行,到底同源策略是怎么体现的呢?下面我

  • springboot vue 跨域问题的解决

    1.Spring Boot跨域配置有两种方法 在后端使用Spring Boot.Spring Boot跨域非常简单,只需书写以下代码即可. @Configuration public class CustomCORSConfiguration { private CorsConfiguration buildConfig() { CorsConfiguration corsConfiguration = new CorsConfiguration(); corsConfiguration.add

  • springboot后端解决跨域问题

    首先我门要知道什么是跨域: 跨域是指 不同域名之间相互访问.跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制. 也就是如果在A网站中,我们希望使用Ajax来获得B网站中的特定内容 如果A网站与B网站不在同一个域中,那么就出现了跨域访问问题. 什么是同一个域? 同一协议,同一ip,同一端口,三同中有一不同就产生了跨域. 前端解决跨域: 前边也说了,跨域是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对Java

  • SpringBoot 跨域问题的解决方案

    什么是跨域? 定义:浏览器从一个域名的网页取请求另一个域名下的东西.通俗点说,浏览器直接从A域访问B域中的资源是不被允许的,如果想要访问,就需要进行一步操作,这操作就叫"跨域".例如,你从百度的页面,点击一个按钮,请求了新浪的一个接口,这就进行了跨域.不单单只有域名不同就是跨域,域名.端口.协议其一不同就是不同的域,请求资源需要跨域. 为什么要跨域? 为什么需要跨域,而不直接访问其他域下的资源呢?这是浏览器的限制,专业点说叫浏览器同源策略限制.主要是为了安全考虑.现在的安全框架,一般请

  • springboot跨域问题解决方案

    这篇文章主要介绍了springboot跨域问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 springboot中的跨域问题,如果不注意的话,容易造成错误,本次springboot版本为2.13 前端错误信息: Access to XMLHttpRequest at 'http://localhost:8080/user/loginOn' from origin 'http://localhost:8082' has been blo

  • springboot跨域CORS处理代码解析

    这篇文章主要介绍了springboot跨域CORS处理代码解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一 源(Origin) 源指URL的协议,域名,端口三部分组成,如果这个三个成分都相同,就判定是同源,否则为不同源. 同源策略(Same origin policy)是一种浏览器的约定,即在浏览器中禁止非同源访问. 二 CORS CORS即"跨域资源共享"(Cross-origin resource sharing),是一个W

  • SpringBoot跨域问题的五种解决方式

    目录 一.什么是跨域 CORS 二.为什么会有跨域问题 三.有哪些跨域类型 四.解决跨域问题的五种方式 1. 添加跨域配置类 2. 重写WebMvcConfigurer 3. 注解 @CrossOrigin 4. 自定义过滤器 5. 手动设置响应头 前后分离的跨域问题其他解决方案 Nginx服务器反向代理 或者直接在Nginx中进行配置 总结 一.什么是跨域 CORS 当一台服务器资源从另一台服务器(不同 的域名或者端口)请求一个资源或者接口,就会发起一个跨域 HTTP 请求. 举个简单的例子,

  • Ajax跨域的完美解决方案

    公司要做一个活动页面,在其过程中发现所有的接口,ajax请求跨域.这里对跨域做个简单介绍以及提供几种解决办法. 由于浏览器实现的同源策略的限制,XmlHttpRequest只允许请求当前源(域名.协议.端口)的资源,所以AJAX是不允许跨域的.这里提供自己常用的三种方法: 1.jsonp访问 JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问: 实现方式 1) <

  • Ajax请求WebService跨域问题的解决方案

    1.背景 用Jquery中Ajax方式在asp.net开发环境中WebService接口的调用 2.出现的问题 原因分析:浏览器同源策略的影响(即JavaScript或Cookie只能访问同域下的内容); 3.解决方案: (1) JSONP:只支持GET方式 (2) CROS:跨域资源共享 以下为CROS解决方案: a.在WebService接口加上响应头信息: b.在web.config文件中加上相关配置节信息: 运用a或者b的解决方案后,浏览器头信息中变动如下: 最终问题得以较好的解决,但对

  • 解决前后端分离 vue+springboot 跨域 session+cookie失效问题

    环境: 前端 vue ip地址:192.168.1.205 后端 springboot2.0 ip地址:192.168.1.217 主要开发后端. 问题: 首先登陆成功时将用户存在session中,后续请求在将用户从session中取出检查.后续请求取出的用户都为null. 解决过程: 首先发现sessionID不一致,导致每一次都是新的会话,当然不可能存在用户了.然后发现cookie浏览器不能自动保存,服务器响应set-cookie了 搜索问题,发现跨域,服务器响应的setCookie浏览器无

  • Ajax跨域问题及解决方案(jsonp,cors)

    跨域 跨域有三个条件,满足任何一个条件就是跨域 1:服务器端口不一致  2:协议不一致  3:域名不一致 解决方案: 1.jsonp 在远程服务器上设法动态的把数据装进js格式的文本代码段中,供客户端调用和进一步处理:在前台通过动态添加script标签及src属性,表面看上去与ajax极为相似,但是,这和ajax并没有任何关系:为了便于使用及交流,逐渐形成了一中非正式传输协议,人们把它称作 jsonp . 代码如下: html: <body> <form action="/&q

  • Ajax实现跨域访问最新解决方案

    在实际项目当中,我们经常会遇到同一个域名下不同项目之间通过Ajax相互调用数据,这样问题就来了,如何通过Ajax实现跨域呢? 解决方案 1.Jsonp Jsonp解决跨域相对简单,服务器无需任何配置.具体实现如下: $.ajax({ type: 'get', url: 'http://xxx.com', data: {}, dataType: 'jsonp', success: function (data) { }, error: function (data) { mask.close();

  • SpringBoot跨域Access-Control-Allow-Origin实现解析

    这篇文章主要介绍了SpringBoot跨域Access-Control-Allow-Origin实现解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 跨域(CORS)是指不同域名之间相互访问. 跨域,指的是浏览器不能执行其他网站的脚本,它是由浏览器的同源策略所造成的,是浏览器对于JavaScript所定义的安全限制策略. 只要协议,子域名,主域名,端口号有一项不同,就属于跨域 跨域的解决方法 前端: 使用jsonp 后端: 实现WebMvcC

随机推荐