Spring Boot与Vue项目中Axios未发送Authorization Header问题

环境与配置 #

技术栈：Spring Boot后端 + Vue.js前端，通过Axios发送请求。

后端CORS配置 #

@Slf4j
@Configuration
@AllArgsConstructor
public class MainConfigurations implements WebMvcConfigurer {
    private final AuthorizationInterceptor authorizationInterceptor;

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        log.info("Add cors mappings: stop cors mapping");
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("*")
                .allowedHeaders("*")
                .exposedHeaders(AUTHORIZATION);
    }

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        log.info("Add interceptors: apply interceptors");
        registry.addInterceptor(this.authorizationInterceptor)
                .addPathPatterns("/**")
                .excludePathPatterns("/auth/**", "/token/**");
    }
}

Axios请求拦截器配置 #

axios.interceptors.request.use (
    function ( config ) {
        config.headers.setAuthorization ( Extras.token );
        config.headers.setAccept ( "application/json" );
        console.log ( config.headers );
        
        return config;
    } ,
    async function ( error ) {
        return {
            success : false ,
            message : error ,
        };
    } ,
);

问题现象 #

• 请求能正常到达后端拦截器，但Axios发送的请求中Authorization Header无法被后端检测到，使用Postman发送相同请求时该Header可正常被检测到。
• CORS预检的OPTIONS请求返回401未授权，且后端接收的该请求Authorization Header为null。
• 此前功能正常，未做任何代码配置改动。

排查与解决方法 #

• 排除OPTIONS请求的拦截：OPTIONS预检请求不会携带Authorization头，当前拦截器对所有路径生效，导致预检请求被拦截返回401。修改拦截器配置，排除OPTIONS方法的请求：

  @Override
  public void addInterceptors(InterceptorRegistry registry) {
      log.info("Add interceptors: apply interceptors");
      registry.addInterceptor(this.authorizationInterceptor)
              .addPathPatterns("/**")
              .excludePathPatterns("/auth/**", "/token/**")
              // 排除OPTIONS预检请求
              .excludePathPatterns(request -> HttpMethod.OPTIONS.name().equals(request.getMethod()));
  }
  

• 调整Axios Header设置方式：改用直接赋值的方式设置Header，避免setAuthorization可能存在的兼容问题：

  axios.interceptors.request.use(
      function(config) {
          // 直接赋值Authorization头
          config.headers.Authorization = Extras.token;
          config.headers.Accept = "application/json";
          console.log(config.headers);
          return config;
      },
      async function(error) {
          return {
              success: false,
              message: error,
          };
      },
  );
  

• 验证Token有效性：确认Extras.token是否存在有效值，在拦截器中打印Extras.token，排查是否因token为空导致Header未设置。
• 清除浏览器缓存：浏览器可能缓存了旧的CORS预检结果，清除缓存或强制刷新页面后重新测试。

内容的提问来源于stack exchange，提问作者Sparks