Spring 安全性正在阻止 Vue.js 页面 |收到 403 错误答案

【问题标题】：Spring security is blocking Vue.js pages | receiving 403 errorSpring 安全性正在阻止 Vue.js 页面 |收到 403 错误
【发布时间】：2022-01-14 16:18:37
【问题描述】：

我有一个 Spring/Vuejs 项目，它将前端和后端耦合到一个 warFile 中，由于某种原因，当我运行 warFile 时，我的 Spring Security 设置阻止了 Vue.js 页面。

当我以这种方式设置配置时，它会阻止页面 -

@Override
public void configure(HttpSecurity security) throws Exception {
    security.csrf().disable()
            .cors().and()
            .authorizeRequests()
            .antMatchers("/api/v1/authenticate", "/api/v1/register").permitAll()
            .anyRequest().authenticated().and().sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);
    security.addFilterBefore(jwtRequestFilter, UsernamePasswordAuthenticationFilter.class);
}

当我以这种方式设置时，它会显示页面和来自我的 api 的数据（它创建 JWT，但仍允许未经授权的 api 调用）-

@Override
public void configure(HttpSecurity security) throws Exception {
    security.csrf().disable()
            .cors().and()
            .authorizeRequests()
            .antMatchers("/api/v1/authenticate", "/api/v1/register", "/**","/css/**","/js/**").permitAll()
            .anyRequest().authenticated().and().sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);
    security.addFilterBefore(jwtRequestFilter, UsernamePasswordAuthenticationFilter.class);
}

当我以第一种方式设置它并在不同的端口上运行前端和后端时，它可以完美运行。它显示页面并阻止所有没有授权 JWT 的 API 调用。

我希望在同一个 warFile 中获得与后端/前端相同类型的结果

有解决办法吗？？？

【问题讨论】：

请发布您的完整调试日志，并且 spring security 已经内置了 JWTFilter 并且自 2018 年以来已经完全支持 JWT，因此请删除 jwtfilter 并按照 spring security 参考手册实现它.

标签： spring vue.js tomcat spring-security jwt

【解决方案1】：

当我以第一种方式设置并在不同端口上运行前端和后端时，它可以完美运行。

我想知道这是否是由于调用了 CORS 策略。否则，Spring Security 在做出授权决定时不会考虑端口号。

当我以这种方式设置配置时，它会阻止页面 -

那是因为你有这行：

.anyRequest().authenticated()

这意味着任何 URL，包括 JS 文件，都需要认证。

当我以这种方式设置它时，它会显示页面和来自我的 api 的数据

那是因为你有这行：

.antMatchers("/**").permitAll()

表示允许任何网址。

DSL 处理 URL in the order the paths are declared。我想你想要两者的混合体。像这样的：

.antMatchers("/api/v1/authenticate", "/api/v1/register", "/css/**","/js/**").permitAll()
.anyRequest().authenticated()

这意味着两个/api 端点和所有/css 端点和所有/js 端点都不需要身份验证，但其他所有端点都需要。

考虑使permitAll 尽可能窄——我不清楚您是否真的希望所有 JS 文件都不需要身份验证。

【讨论】：

我试过你在这里的东西，它阻止了warFile中的页面。我只希望那里的 2 个 api 端点向公众开放，其余的需要身份验证。而且我希望我所有的 Vue.js 视图（在 warFile 中）都是公开的（我将处理前端的任何查看权限）这很奇怪，你在这里应该可以工作
有时在战争文件中绊倒人们的另一件事是上下文路径。您是否正在部署到 ROOT 以外的其他环境？否则，请为 org.springframework.security 打开 TRACE 日志记录，并显示被拒绝的 JS 请求之一的日志。
没有。根目录（ localhost:8080/#/ ）是您打开项目时首先看到的 URL
@HelpTheNoob 你的根路径/ 中有文件吗？如果没有，您可以删除/**。如果有，您应该将其移至子 patt，然后删除 /**。
@jzheaux 当我找到它时，你就发布了这个。我正在检查它以显示我的方式。谢谢！

【解决方案2】：

@jzheaux 你的根评论让我找到了答案。

这是我所做的更改，它的工作原理与我现在需要的一样。谢谢指导！

@Override
public void configure(HttpSecurity security) throws Exception {
    security.csrf().disable()
            .cors().and()
            .authorizeRequests()
            .antMatchers("/api/v1/authenticate","/api/v1/register","/static/**","/").permitAll()
            .anyRequest().authenticated().and().sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);
    security.addFilterBefore(jwtRequestFilter, UsernamePasswordAuthenticationFilter.class);
}

【讨论】：