前言

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

项目介绍

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

遇到问题

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

@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 当我想到了这个问题的时候立马打开了后端代码。果然 我的后端代码里,并没有写出来 这个跨域问题。

@Configuration
@EnableGlobalMethodSecurity(prePostEnabled = true)
class WebSecurityConfig : WebSecurityConfigurerAdapter() {

    /**
     * 拦截请求配置
     * @param http 要拦截的请求
     */
    @Throws(Exception::class)
    override fun configure(http: HttpSecurity) {
        // 跨域配置
        http.cors()
      
        // 下面代码省略 ...

    }
}

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