解决vue+axios-springboot/spring mvc自定义header跨域问题

最近项目在做前后端分离，遇到了跨域问题，下面就把整个跨域过程中出现的问题及解决方式重现一遍，当做笔记记录一下，文中加高亮或加粗的文字需要注意下。

项目概要描述，项目前端采用vue+axios，后端采用springboot搭建起来的框架，由于权限等需要，需要在前端加上后端返回的自定义的header信息。

跨域项目在没有任何特殊配置之前，前端往后端发请求的时候会出现以下错误：

`Access to XMLHttpRequest at 'http://localhost:9090/rest/auth/login' from origin 'http://0.0.0.0:8888' has been blocked by CORS policy:Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.`

这是毋庸置疑的，项目支持跨域需要后端特殊处理。后端支持跨域配置的方式有很多，就只写下面一种方式：

@Configuration
public class InitConfiguration extends WebMvcConfigurationSupport {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedHeaders("*")
                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                .maxAge(3600)
            		.allowCredentials(true);
    }
}

但是这样的代码前端获取不到不支持自定义Header信息。查了下相关资料，于是修改上面的代码如下：

@Configuration
public class InitConfiguration extends WebMvcConfigurationSupport {
  
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedHeaders("*")
                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                .maxAge(3600)
                .exposedHeaders("Authorization","uid","email")
          			.allowCredentials(true);
    }
}

这里注意需要把自定义header用exposedHeaders方法特殊处理下，不要用"*"代替，文档上说了

/**
 * Set the list of response headers other than "simple" headers, i.e.
 * {@code Cache-Control}, {@code Content-Language}, {@code Content-Type},
 * {@code Expires}, {@code Last-Modified}, or {@code Pragma}, that an
 * actual response might have and can be exposed.
 * <p>Note that {@code "*"} is not supported on this property.
 * <p>By default this is not set.
 */
public CorsRegistration exposedHeaders(String... headers) {...}

"*" is not supported on this property.

于是把uid,email等header信息加上之后重新发布代码，测试POST登陆接口，果然可以登陆成功了，后端也没报跨域错误了。本以为问题解决了，过了一会儿，前端同事又发现了，登陆接口可以跨域，获取用户菜单接口(GET请求)，又报跨域错误，看浏览器console，传参信息，header信息也没有错误，肯定是后端又出问题了，于是打开代码调试。获取用户接口需要验证用户登录状态，需要从header中获取uid和email 的值，问题就出现这儿了，后端request对象中没有获取到uid和email的值，打开Wireshark（如果不习惯使用这个工具，可以调整项目log日志级别，打开trace就可以看到请求过程，只是日志比较多，不太容易查看），看看传输有没有问题。

果然最下面一条返回401了，验证权限失败，更奇怪的是，怎么会有OPTIONS请求，明明发送的是GET。第一条登陆的POST请求之前也发送了OPTIONS请求（第一条成功的原因是请求URI是由于没有进行权限拦截，直接放行，所以成功返回了）。

而OPTIONS请求对于自定义的header有限制作用，往后端发送只会发送header的首部字段名，并不会发送该字段里具体内容信息，因此后端无法获取到uid和email的值，导致验证失败返回了401。

先解决问题，由于访问量不大，可以通过修改服务端解决。继续针对OPTIONS请求加配置如下：

@Component
public class CorsInterceptor extends HandlerInterceptorAdapter {
  
    private static final String OPTIONS = "OPTIONS";

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        if (OPTIONS.equals(request.getMethod())) {
            response.setHeader("Access-Control-Allow-Origin", request.getHeader("origin"));
            response.setHeader("Access-Control-Allow-Credentials", "true");
            response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
            //设置预检请求的有效期
            response.setHeader("Access-Control-Max-Age", "72000");
            response.setHeader("Access-Control-Allow-Headers", "Access-Control-Max-Age, Access-Control-Allow-Credentials, Access-Control-Allow-Methods, Origin, X-Requested-With, Content-Type, Accept ,uid ,email");
            response.setStatus(200);
            response.setContentLength(0);
            return false;
        }
        return true;
    }
}

注意的是设置 Access-Control-Allow-Headers的时候，加上自定义的header。设置Access-Control-Max-Age是一个优化措施，目的是以后的请求在有效时间内不会发送OPTIONS进行预检，不同的浏览器对于这个数值支持是不一样的

然后在InitConfiguration类上面加上下面的代码使拦截器生效：

@Resource
private CorsInterceptor corsInterceptor;

@Override
public void addInterceptors(InterceptorRegistry registry) {
    registry.addInterceptor(corsInterceptor).addPathPatterns("/**");
}

到此，已经完全解决了跨域问题。如果还能检测到每次请求前发送OPTIONS请求，注意看下浏览器的设置，开发者工具--网络--Disable cache选项不要勾上。

后来网上查了下，前端代码并没有发起过OPTIONS请求，为什么会出现这种情况，遇到这种问题的还真挺多的，axios默认请求content-type是：application/json，而这个是浏览器需预检请求的content-type，所以有了OPTIONS请求。下面是针对跨域各种请求头、响应头的中文版官方文档链接，上面各个参数介绍比较详细，就不进行解释了。可以根据自己需要进行设置：

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

最后，感谢网络上的各路大神!!!