Spring Security配置类导致跨域问题：doesn‘t pass access control check: It does not have HTTP ok status.

最新推荐文章于 2023-08-29 18:03:44 发布

钟良堂

最新推荐文章于 2023-08-29 18:03:44 发布

阅读量925

点赞数 1

分类专栏：笔记文章标签： spring http 前端

本文链接：https://blog.csdn.net/elsa001/article/details/129339018

版权

笔记专栏收录该内容

75 篇文章 11 订阅

订阅专栏

文章描述了一个前端使用axios进行API请求时遇到的CORS跨域问题。错误信息显示预检请求（OPTIONS）未通过后端的SpringSecurity访问控制检查。解决方案是在SpringSecurity配置中添加代码，允许OPTIONS请求通过，以解决预检请求被拦截的问题。这样前端的带有自定义头部（如JWT）的请求就能成功发送到后端。

摘要由CSDN通过智能技术生成

一、技术栈

前端：Vue、Axios
后端：Spring Security、SpringBoot、JWT等等

二、问题描述

前端请求信息如下：

axios.get('http://localhost:8081/restaurant/list', {
        headers: {
          token: info1
        }
      }).catch(error => {
        console.log(error)
      })
        .then(res => {
          console.log(JSON.parse(localStorage.getItem('user_token')))
          console.log(res)
        })

完整错误信息如下（前端）：

Access to XMLHttpRequest at 'http://localhost:8081/restaurant/list' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Error: Network Error
    at createError (createError.js?2d83:16:1)
    at XMLHttpRequest.handleError (xhr.js?b50d:99:1)

Failed to load resource: net::ERR_FAILED

在这里插入图片描述

报错信息翻译：
从原点“http://localhost:8080”访问“http://localhost:8081/restaurant/list”的XMLHttpRequest已被CORS策略阻止:对飞行前请求的响应没有通过访问控制检查:它没有HTTP ok状态。
分析：
这个问题看起来是没有走到后端，我Debug了一下后端的过滤器，发现有写过滤器可以进行Debug，但是有些过滤器根本没有进行Debug就结束了，我Debug了一下我后端接口的Controller接口，也没有走到那里，这说明我的请求没有走到接口，而是背被某个过滤器给劫持了，我自己也看了很久，在网上翻看了很久的资料，我发现我的请求很可能被Spring Security配置类给限制住了，于是我马上查看了一些博客看看Spring Security配置类如何让我自己的前端请求通过，于是我知道了如何解决这个问题。

三、解决方法

在Spring Security配置类的中，加入这行代码

//非普通请求(比如请求新增了自定义头部信息,比如Jwt头),会发送预检Option请求，这里直接让他通过
.antMatchers(HttpMethod.OPTIONS).permitAll()

完整的配置类如下：

@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Autowired
    private JwtAuthenticationTokenFilter jwtAuthenticationTokenFilter;

    // 创建BCryptPasswordEncoder
    @Bean
    public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
                //关闭csrf
                .csrf().disable()
                //不通过Session获取SecurityContext
                .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
                .and()
                .authorizeRequests()
                // 对于登录接口 允许匿名访问
                .antMatchers("/consumer/login","/manager/login","/hello").anonymous()
                //非普通请求(比如请求新增了自定义头部信息,比如Jwt头),会发送预检Option请求，这里直接让他通过
                .antMatchers(HttpMethod.OPTIONS).permitAll()
                // 除上面外的所有请求全部需要鉴权认证
                .anyRequest().authenticated();

        //添加过滤器
        http.addFilterBefore(jwtAuthenticationTokenFilter, UsernamePasswordAuthenticationFilter.class);
    }

    @Bean
    @Override
    public AuthenticationManager authenticationManagerBean() throws Exception {
        return super.authenticationManagerBean();
    }
}

在这里插入图片描述
原因如下：
在我们的每个前端请求中，如果需要自己加上一个headers配置信息进行请求，那每次在正式请求之前会发起一个OPTIONS方法的预检请求，而我用了Spring Security拦截了所有请求，只有三个请求可以通过，因此这个OPTIONS方法的预检请求也会被拦截，所以只需要在配置文件中进行配置即可。