SpringBoot+vue前后端分离的跨域问题

近期项目架构升级，前端统一使用vue框架，后台是SpringCloud系列搭建的微服务。前端统一访问的是zuul网关代理到Docker上的服务，在和前端开发人员调试时发现了问题。

最初后台配置的跨域支持为如下：

**
 * 初始化相关配置
 */
@ControllerAdvice
@Configuration
public class WebConfig extends WebMvcConfigurerAdapter{
    @Override
    public void configureMessageConverters(List<HttpMessageConverter<?>> converters) {
        Jackson2ObjectMapperBuilder builder = new Jackson2ObjectMapperBuilder();
        builder.serializationInclusion(JsonInclude.Include.NON_NULL);
        ObjectMapper objectMapper = builder.build();
        SimpleModule simpleModule = new SimpleModule();
        simpleModule.addSerializer(Long.class, ToStringSerializer.instance);
        objectMapper.registerModule(simpleModule);
        objectMapper.configure(MapperFeature.PROPAGATE_TRANSIENT_MARKER, true);// 忽略 transient 修饰的属性
        converters.add(new MappingJackson2HttpMessageConverter(objectMapper));
        super.configureMessageConverters(converters);
    }

    //这里配置对前端跨域的支持
    /**
     * 跨域支持
     * @param registry
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowCredentials(true)
                .allowedMethods("GET", "POST", "DELETE", "PUT")
                .maxAge(3600);
    }
}
           

这样配置后，在调试阶段前端不通过zuul网关直接访问docker上的服务是没有问题的。

但是，在生产环境中docker上的服务是无法直接访问的，必须通过zuul网关代理，于是问题来了。。。

由于在zuul网关中是需要检验用户的接口访问权限的，用户在登陆成功后会得到JWT格式的token,然后在之后的所有请求中必须在RequestHeaders中携带token，用于后端校验。

但是，前端vue在header中设置token后并没有用，后台接收不到这个token。。。。

其实这就是浏览器在作怪了，因为前端设置了自定义的请求头，所以在正常请求之前浏览器会先发送一个OPTIONS方式的请求用于验证后台是否支持自定义请求头。

由于后端并没有设置对OPTIONS方式请求的支持所以拒绝了，知道了问题的原因后我们只需要在后台的拦截器中加入判断的代码：

//如果是OPTIONS方式的请求直接通过
if ("OPTIONS".equals(request.getMethod())){
            return true;
        }
           

这样后台就可以正常接收到前端携带的token了。