关于Springboot中跨域问题的解决(Response to preflight request doesn‘t pass access control check)

Springboot中跨域问题的解决等不及的小伙伴，直接跳到结论部分即可，谢谢!!!1. 背景1.1 使用技术栈Spring SecuritySpringbootVue.axiosJwt1.2 关键代码Spring Security实现了JWT验证配置类相关代码package xyz.yq56.sm.config;import org.springframework.beans.factory.a

一步一结

5030人浏览 · 2021-10-06 01:21:06

一步一结 · 2021-10-06 01:21:06 发布

Springboot中跨域问题的解决

等不及的小伙伴，直接跳到结论部分即可，谢谢!!!

1. 背景

1.1 使用技术栈

Spring Security
Springboot
Vue.axios
Jwt

1.2 关键代码

Spring Security实现了JWT验证

配置类相关代码

package xyz.yq56.sm.config;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.builders.WebSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.config.annotation.web.configurers.AbstractHttpConfigurer;
import org.springframework.security.config.http.SessionCreationPolicy;
import org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter;

import xyz.yq56.sm.filter.JwtSecurityFilter;

/**
 * @author yi qiang
 * @date 2021/9/25 9:16
 */
@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Autowired
    JwtSecurityFilter jwtSecurityFilter;

    /**
     * 配置接收检查的http请求
     *
     * @param http http
     * @throws Exception 异常
     */
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors(AbstractHttpConfigurer::disable)
                .csrf(AbstractHttpConfigurer::disable)
                .sessionManagement(item -> item.sessionCreationPolicy(SessionCreationPolicy.STATELESS))
                .authorizeRequests(req -> req
                        .antMatchers("/user/biz/login").permitAll()
                        .anyRequest().authenticated())
                .addFilterBefore(jwtSecurityFilter, UsernamePasswordAuthenticationFilter.class)
                .httpBasic(AbstractHttpConfigurer::disable)
        ;
    }

    /**
     * 配置忽略静态资源
     *
     * @param web web
     * @throws Exception 异常
     */
    @Override
    public void configure(WebSecurity web) throws Exception {
        web.ignoring().mvcMatchers("/public/**", "/static/**");
    }

    /**
     * 更改数据源实现
     *
     * @param auth 认证
     * @throws Exception 异常
     */
    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {

    }
}

Filter相关代码: 获取JWT认证头信息，然后进行认证

package xyz.yq56.sm.filter;

import java.io.IOException;
import java.util.List;
import java.util.Map;
import java.util.stream.Collectors;

import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.lang.NonNull;
import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
import org.springframework.security.core.authority.SimpleGrantedAuthority;
import org.springframework.security.core.context.SecurityContextHolder;
import org.springframework.stereotype.Component;
import org.springframework.web.filter.OncePerRequestFilter;

import lombok.extern.slf4j.Slf4j;
import xyz.yq56.easytool.enums.JwtClaimKey;
import xyz.yq56.easytool.properties.EasyToolProperties;
import xyz.yq56.easytool.provider.jwt.JwtProvider;
import xyz.yq56.easytool.utils.json.JsonUtils;
import xyz.yq56.easytool.utils.nvll.NullUtil;
import xyz.yq56.easytool.utils.string.TextUtils;
import xyz.yq56.sm.common.context.RequestContextUtil;

/**
 * @author yi qiang
 * @date 2021/10/2 2:09
 */
@Component
@Slf4j
public class JwtSecurityFilter extends OncePerRequestFilter {

    @Autowired
    EasyToolProperties easyToolProperties;

    @Autowired
    JwtProvider jwtProvider;

    @Override
    protected void doFilterInternal(
            @NonNull HttpServletRequest request,
            @NonNull HttpServletResponse response,
            @NonNull FilterChain filterChain) throws ServletException, IOException {
        if (checkJwtToken()) {
            //do something
            Map<String, Object> claims = jwtProvider.validateAccessToken(extractToken());
            if (!NullUtil.isEmpty(claims)) {
                List<String> list = TextUtils.strToList(String.valueOf(claims.get(JwtClaimKey.AUTHORITIES.getKey())));
                List<SimpleGrantedAuthority> authorities = list.stream().map(SimpleGrantedAuthority::new).collect(Collectors.toList());
                //从token获取携带的信息，然后构建UsernamePasswordAuthenticationToken,并存入context
                UsernamePasswordAuthenticationToken authenticationToken = new UsernamePasswordAuthenticationToken(claims.get(JwtClaimKey.SUB.getKey()), null, authorities);
                SecurityContextHolder.getContext().setAuthentication(authenticationToken);
                log.info("Token认证成功,设置context | authenticationToken: {}", JsonUtils.toJson(authenticationToken));
            } else {
                //拿不到信息就clear context
                log.info("Token认证失败,清空context | claims: {}", claims);
                SecurityContextHolder.clearContext();
            }
        } else {
            log.info("Token认证失败,清空context | Token不存在或格式异常");
            SecurityContextHolder.clearContext();
        }

        filterChain.doFilter(request, response);
    }

    /**
     * 检查头是否存在
     *
     * @return 是否为jwt
     */
    private boolean checkJwtToken() {
        String jwtHeader = extractToken();
        log.info("检查Token格式 | token: {}", jwtHeader);
        return TextUtils.isNotEmpty(jwtHeader) && jwtHeader.startsWith(easyToolProperties.getJwt().getPrefix());
    }

    private String extractToken() {
        return RequestContextUtil.getHeaderOrParam(easyToolProperties.getJwt().getHeader());
    }

}

登录接口: 获取用户信息，然后颁发令牌

package xyz.yq56.sm.module.user.controller;

import java.util.List;

import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.baomidou.mybatisplus.core.toolkit.Wrappers;

import xyz.yq56.easytool.provider.jwt.JwtProvider;
import xyz.yq56.easytool.utils.collection.CollectUtil;
import xyz.yq56.easytool.utils.collection.MapUtil;
import xyz.yq56.easytool.utils.log.LogUtil;
import xyz.yq56.sm.common.dto.Result;
import xyz.yq56.sm.common.enums.LogPrefix;
import xyz.yq56.sm.common.enums.ResponseCode;
import xyz.yq56.sm.common.util.ResultUtil;
import xyz.yq56.sm.module.user.model.User;
import xyz.yq56.sm.module.user.model.UserVo;
import xyz.yq56.sm.module.user.service.UserService;

/**
 * @author yi qiang
 * @date 2021/10/1 17:40
 */
@RestController
@RequestMapping("/user/biz/")
public class UserBizController {

    @Autowired
    JwtProvider jwtProvider;

    @Autowired
    UserService userService;

    @PostMapping("login")
    public Result<UserVo> login(@RequestBody User user) {
        LogUtil.info(LogPrefix.USER_BIZ.getPrefix(), MapUtil.builder()
                .put("user", user).maps());

        List<User> userList = userService.list(Wrappers.<User>query().eq("username", user.getUsername())
                .eq("password", user.getPassword()));
        if (CollectUtil.isEmpty(userList)) {
            return ResultUtil.fail(ResponseCode.USER_NOT_EXIST);
        }

        if (userList.size() > 1) {
            return ResultUtil.fail(ResponseCode.USER_EXIST_SAME);
        }
        return ResultUtil.success(convertToVo(userList));
    }

    private UserVo convertToVo(List<User> userList) {
        User user = userList.get(0);
        UserVo userVo = new UserVo();
        BeanUtils.copyProperties(user, userVo);
        userVo.setAccessToken(jwtProvider.generateAccessToken(JwtProvider.
                buildClaims(userVo.getUid(), "ADMIN", "ADMIN,USER"), userVo.getUsername()));
        return userVo;
    }

    @PostMapping("logout")
    public Result<UserVo> logout(String uid) {
        return ResultUtil.success(null);
    }


}

前端部分给axios配置了请求拦截器,会在头部带上JWT认证头信息

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
// 导入全局样式表
import './assets/css/global.css'
import './assets/font/iconfont.css'
import axios from 'axios'

// 配置请求根路径
axios.defaults.baseURL = 'http://localhost:8080/'
axios.interceptors.request.use(config => {
  if (config.url.indexOf('login') === -1) {
    config.headers.Authorization = window.sessionStorage.getItem('Authorization')
  }
  return config
})
Vue.prototype.$http = axios

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

除此之外，一般会事先进行一个基本的跨域配置，如下代码：

package xyz.yq56.sm.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

/**
 * @author yiqiang
 */
@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.setAllowCredentials(true);
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.addAllowedHeader("*");

        UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(urlBasedCorsConfigurationSource);
    }
}

1.3 问题展示

以上代码登录接口都不会出现跨域问题,但是当请求普通接口(比如菜单接口)时,会出现跨域问题.
错误信息:

Access to XMLHttpRequest at xx from orgin xx has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

F12截图

在这里插入图片描述

2 解决方案

其实通过报错信息也能大概明白,是预检请求没有通过导致的报错,一般就是Option请求出错
搜索了半天,有人说加入如下配置即可解决

package xyz.yq56.sm.filter;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.http.HttpMethod;
import org.springframework.stereotype.Component;

/**
 ** 暂时没发现有什么用,先注释掉
 * @author yiqiang
 */
@Component
public class AccessCorsFilter implements Filter {

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        HttpServletResponse res = (HttpServletResponse) response;
        res.addHeader("Access-Control-Allow-Credentials", "true");
        res.addHeader("Access-Control-Allow-Origin", "*");
        res.addHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT");
        res.addHeader("Access-Control-Allow-Headers", "Content-Type,X-CAF-Authorization-Token,sessionToken,X-TOKEN");
        if (((HttpServletRequest) request).getMethod().equals(HttpMethod.OPTIONS.name())) {
            response.getWriter().println("ok");
            return;
        }
        chain.doFilter(request, response);
    }

    @Override
    public void destroy() {
    }

    @Override
    public void init(FilterConfig filterConfig) {
    }
}

先说结果,我尝试加入了如上配置,但是并没有什么卵用.这个只是加了个过滤器，你这里没给人家退回去，不代表别人不会退回去.
经过推敲，我认为是Spring Security可能也有相关的限制，于是我去搜索了Security的跨域配置,果然被我找到了requestMatchers(CorsUtils::isPreFlightRequest).permitAll()这个配置项.于是我修改了Security配置,如下：

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors(AbstractHttpConfigurer::disable)
                .csrf(AbstractHttpConfigurer::disable)
                .sessionManagement(item -> item.sessionCreationPolicy(SessionCreationPolicy.STATELESS))
                .authorizeRequests(req -> req
                        //非普通请求(比如请求新增了自定义头部信息,比如Jwt头),会发送预检Option请求，这里直接让他通过
                        .requestMatchers(CorsUtils::isPreFlightRequest).permitAll()
                        .antMatchers("/user/biz/login").permitAll()
                        .anyRequest().authenticated())
                .addFilterBefore(jwtSecurityFilter, UsernamePasswordAuthenticationFilter.class)
                .httpBasic(AbstractHttpConfigurer::disable)
        ;
    }

经验证,请求正常，改动生效
在这里插入图片描述

3 结论

如果项目中符合如下几点,可以尝试一下

项目中使用了Spring Security
前端跨域请求中携带了自定义的Header，比如Jwt等等
控制台报错: Access to XMLHttpRequest at xx from orgin xx has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
已配置常规跨域配置CorsFilter

以上几点均满足的话，请立刻尝试新增Spring Security配置.requestMatchers(CorsUtils::isPreFlightRequest).permitAll()

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors(AbstractHttpConfigurer::disable)
                .csrf(AbstractHttpConfigurer::disable)
                .sessionManagement(item -> item.sessionCreationPolicy(SessionCreationPolicy.STATELESS))
                .authorizeRequests(req -> req
                        //非普通请求(比如请求新增了自定义头部信息,比如Jwt头),会发送预检Option请求，这里直接让他通过
                        .requestMatchers(CorsUtils::isPreFlightRequest).permitAll()
                        .antMatchers("/user/biz/login").permitAll()
                        .anyRequest().authenticated())
                .addFilterBefore(jwtSecurityFilter, UsernamePasswordAuthenticationFilter.class)
                .httpBasic(AbstractHttpConfigurer::disable)
        ;
    }

希望各位老大看到我这篇之后可以不用寻找下一篇博客.能帮到你们的话，麻烦帮忙点个赞或者评论一下,谢谢.

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^