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

女爷i 2022-05-20 10:35 253阅读 0赞

近期项目架构升级，前端统一使用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了。