Spring Boot Security 跨域请求配置

前言

之前的项目一直没有加 token 作为校验,这样的话势必会出现安全隐患。所以在项目维护的时候就添加了 JWT 和 Spring Security 作为安全防护。然而紧接着出现了一个问题,无法进行跨域请求。

项目介绍

这个项目是我之前一直在做的一个在线自动评测系统,包括客观题和主观题。后端采用 Spring Boot ,前端之前使用 vue,结果写前端的同学找工作去了,而且前端的代码很多不规范的地方,所以借此机会就打算把前端重写一次。写之前比较了 vue react 和 angular。最后选择了 Angular, 毕竟 typescript 和 依赖注入 还有 Rxjs 这几个技术太骚了。😂

遇到问题

当重写前端的时候,采用 .http 文件测试也是可以发送和接收到请求的,然而通过 Angular 的时候发现,请求报错,出现了跨域的问题,这里说明一下,之前没有使用 Security 的时候也是处理的跨域的问题。这里贴一下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@Configuration
class CorsConfig : WebMvcConfigurer {
/**
* 跨域请求配置
* @param registry 跨域请求
*/
override fun addCorsMappings(registry: CorsRegistry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
.allowCredentials(false)
.maxAge(3600)
}
}

我一直认为是前端没有处理好跨域的问题,查看了很多 Angular 的文档,并没有找到问题,于是乎我感觉到了,一定是后端的问题。紧接着想到了 Security 里面的一个参数 cors 当我想到了这个问题的时候立马打开了后端代码。果然 我的后端代码里,并没有写出来 这个跨域问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@Configuration
@EnableGlobalMethodSecurity(prePostEnabled = true)
class WebSecurityConfig : WebSecurityConfigurerAdapter() {
/**
* 拦截请求配置
* @param http 要拦截的请求
*/
@Throws(Exception::class)
override fun configure(http: HttpSecurity) {
// 跨域配置
http.cors()
// 下面代码省略 ...
}
}

此时我们重启应用,前端再次发送请求,请求成功。

不介意的话,可以请我喝杯咖啡吗?或扫一扫支付宝领红包