调用外部接口引起的跨域问题

最新推荐文章于 2025-03-31 19:33:45 发布

syx_cainiao

最新推荐文章于 2025-03-31 19:33:45 发布

阅读量1.3k

点赞数

分类专栏：后台文章标签： spring

本文链接：https://blog.youkuaiyun.com/syx_cainiao/article/details/106537945

版权

后台专栏收录该内容

6 篇文章

订阅专栏

在集成外部建议系统时，出现了跨域问题，导致无法正常显示未读消息红点。尝试了使用@CrossOrigin注解和addCorsMappings配置，但发现这些方法在使用自定义拦截器时会导致跨域配置失效，原因是请求先经过拦截器而非Mapping。最终采用CorsFilter过滤器成功解决了跨域异常。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景：在我们系统上，从外部引用了一个建议系统，在建议系统当用户被给予评论或回复之后，我的消息中显示未读消息数。
实现的效果：在建议系统中当未读消息数大于0时，我们的系统引入建议系统的位置上会出现提示有未读消息的红点。
在建议系统的后台，我们写了一个countBlog的接口，用来获取未读消息数量（json格式）
在我们的系统的前台，引入接口通过返回的未读消息数量来控制红点显示
运行后报跨域问题的bug：
解决问题：
方法一：注解@CrossOrigin
方法二：addCorsMappings配置

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

弊端：使用此方法配置之后再使用自定义拦截器时跨域相关配置就会失效。
原因是请求经过的先后顺序问题，当请求到来时会先进入拦截器中，而不是进入Mapping映射中，所以返回的头信息中并没有配置的跨域信息。浏览器就会报跨域异常。

方法三：使用CorsFilter过滤器

private CorsConfiguration corsConfig() {
    CorsConfiguration corsConfiguration = new CorsConfiguration();
    * 请求常用的三种配置，*代表允许所有，当时你也可以自定义属性（比如header只能带什么，只能是post方式等等）
    */
    corsConfiguration.addAllowedOrigin("*");
    corsConfiguration.addAllowedHeader("*");
    corsConfiguration.addAllowedMethod("*");
    corsConfiguration.setAllowCredentials(true);
    corsConfiguration.setMaxAge(3600L);
    return corsConfiguration;
}
@Bean
public CorsFilter corsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", corsConfig());
    return new CorsFilter(source);
}