SpringBoot+vue前后端分离的跨域问题
近期项目架构升级,前端统一使用vue框架,后台是SpringCloud系列搭建的微服务。前端统一访问的是zuul网关代理到Docker上的服务,在和前端开发人员调试时发现了问题。最初后台配置的跨域支持为如下:*** 初始化相关配置*/@ControllerAdvice@Configurationpublic class WebConfig extends WebMvcCon...
·
近期项目架构升级,前端统一使用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了。
更多推荐
已为社区贡献1条内容
所有评论(0)