SpringBoot 2.x Vue Axios 跨域问题及401等异常处理

最新推荐文章于 2024-07-03 11:32:08 发布

原创

最新推荐文章于 2024-07-03 11:32:08 发布 · 8.4k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#SpringBoot #Vue #axios

Vue + Axios 需要Api能够跨域调用，网上也是很多跨域的解决方法，比如重写 WebMvcConfigurationSupport 的addCrosMappings 方法，如：

public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
            .allowedOrigins("*")
            .allowedMethods("GET","POST","PUT","DELETE","OPTIONS")
            .allowedHeaders("X-Access-Token");
    log.debug("允许跨域配置成功！");
}

这种方法正常能够跨域，但是遇到进行 Token 认证被拦截器或者过滤器处理成401并返回后，跨域也就失败，axios 会读不到error.response，而无法进行401处理。@CrossOrigin更是不能解决，况且每个 Controller加也不方便。

我的解决方法简单介绍如下：

1、定义拦截器CrossInterceptor，并且能够通过配置修改允许跨域域名

import lombok.extern.log4j.Log4j2;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.HttpHeaders;
import org.springframework.web.servlet.HandlerInterceptor;

import javax.servlet.http.HttpServletRequest;
i