什么是跨域?

定义:浏览器从一个域名的网页取请求另一个域名下的东西。通俗点说,浏览器直接从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解决跨域问题,可以设置全局跨域,也可以实现局部跨域,灵活配置方便使用。

跨域问题与SpringBoot解决方案的更多相关文章

  1. 跨域原因及SpringBoot、Nginx跨域配置

    目录 概述 简单请求 跨域解决方案 概述 SpringBoot跨域配置 Nginx跨域配置 概述 MDN文档 Cross-Origin Resource Sharing (CORS) 跨域的英文是Cr ...

  2. 【分布式系列】session跨域及单点登录解决方案

    Cookie机制 Cookie技术是客户端的解决方案,Cookie就是由服务器发给客户端的特殊信息,而这些信息以文本文件的方式存放在客户端,然后客户端每次向服务器发送请求的时候都会带上这些特殊的信息. ...

  3. ajax 跨域----好用的解决方案

    一.前言 跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了! 但是感觉还是差了点什么,于是现在重新梳理了一下.个人见识有限,如有差错,请多多见谅 二.前言 关于跨 ...

  4. Web 跨域请求问题的解决方案- CORS 方案

    1.什么是跨域 跨域是指跨域名的访问,以下情况都属于跨域: 跨域现象 实例 域名不相同 www.baidu.com与www.taobao 一级域名相同,但是端口不相同 www.baidu.com:80 ...

  5. 跨域资源共享(CORS)问题解决方案

    CORS:Cross-Origin Resource Sharing(跨域资源共享) CORS被浏览器支持的版本情况如下:Chrome 3+.IE 8+.Firefox 3.5+.Opera 12+. ...

  6. ajax跨域问题及相关解决方案

    1 什么是跨域 所谓的跨域是指浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器施加的安全限制. 所谓同源是指,域名,协议,端口均相同: 2 什么时候会存在跨域的问题 页面访问不同源 ...

  7. Web 跨域请求(OCRS) 前端解决方案

    1.同源策略如下: URL 说明 是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.j ...

  8. IE9(8)跨域(CORS)解决方案

    HTML5中 XMLHttpRequest Level 2 的推出.可以通过在返回的HTTP请求头中加入 Access-Control-Allow-Origin 的设置,让浏览器支持对不同域的AJAX ...

  9. Ajax 跨域的几种解决方案

    作者:黄轩链接:http://www.zhihu.com/question/19618769/answer/38934786来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处 ...

随机推荐

  1. FFmpeg命令大全(更新中)

    1.视频抽取音频: ffmpeg -i 3.mp4 -vn -y -acodec copy 3.aacffmpeg -i 3.mp4 -vn -y -acodec copy 3.m4a

  2. VS程序不显示控制台

    之所以会有这样的想法是因为,有时候我会用到一些库,这些库在使用的时候会在控制台输出一些信息,虽然这是无可厚非的事情,但是,如果我写了一个界面,这个时候当然是希望要显示什么就显示在界面上,或者就不要显示 ...

  3. SQL基础教程(第2版)第6章 函数、谓词、CASE表达式:6-1 函数

    6-1 各种各样的函数 ● 函数的种类很多,无需全都记住,只需要记住具有代表性的函数就可以了,其他的可以在使用时再进行查询. ■函数的种类所谓函数,就是输入某一值得到相应输出结果的功能,输入值称为参数 ...

  4. UML-设计对象时涉及的制品有哪些?

    1.SSD.系统操作.交互图--->用例实现 1).通信图 2).顺序图 将SSD中的系统操作作为领域层控制器对象的起始消息.这是关键. 2.用例--->用例实现 在整个开发过程中,业务人 ...

  5. JavaScript—面向对象 贪吃蛇_2 游戏对象

    游戏对象 function Game(map) { this.map = map; this.food = new Food(this.map) this.snake = new Snake(this ...

  6. JavaScript学习总结(四)

    这一部分我们继续介绍JavaScript的常用对象. Number对象 创建Number对象 方式1: var 变量= new Number(数字) 方式2: var 变量 = 数字; 常用的方法 t ...

  7. [CF百场计划]#3 Educational Codeforces Round 82 (Rated for Div. 2)

    A. Erasing Zeroes Description You are given a string \(s\). Each character is either 0 or 1. You wan ...

  8. 对Java面向对象中多态的理解

    理解的要点:多态意味着父亲的变量可以指向子类对象 面向对象程序设计的三大支柱是封装.继承和多态 封装对外把相应的属性和方法实现的细节进行了隐藏.继承关系使一个子类继承父亲的特征,并且加上了一些新的特征 ...

  9. 化 Bernoulli 方程为一阶线性微分方程

    形如 $ {\displaystyle \frac{dy}{dx}+p(x)y=q(x)y^n(n\neq 0,1) \ \ \ \ \ (1)}$ 的方程为 Bernoulli 方程.现在我们考虑其 ...

  10. dozer

    1.简介 dozer是用来两个对象之间属性转换的工具,有了这个工具之后,我们将一个对象的所有属性值转给另一个对象时,就不需要再去写重复的set和get方法了. 2.如果两个类之间的属性有些属性意思一样 ...