添加Token后Spring前端无法调用微服务,跨域问题求助
解决微服务跨域调用问题(带Token场景)
看起来你遇到的是带Token的跨域请求被拦截的典型问题,结合你的配置代码,我来帮你拆解问题并给出具体解决方案:
一、当前配置的核心问题
你的全局Cors配置里有两个致命错误,这也是加Token后请求失败的关键:
allowedHeaders("")和allowedOrigins("")设置为空字符串,浏览器会直接拦截包含自定义Header(比如Token所在的Authorization)的请求- 主类和控制器同时使用
@CrossOrigin注解,和全局Cors配置可能产生冲突,导致规则失效
二、分步解决方案
1. 修正微服务的全局Cors配置
把你主类里的CorsConfigurer Bean改成下面这样,重点是明确允许必要的请求头和前端Origin:
@Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurer() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") // 必须允许Token所在的Authorization头,以及其他常用请求头 .allowedHeaders("Authorization", "Content-Type", "Accept") // 带allowCredentials=true时,不能用*,必须指定具体前端地址 .allowedOrigins("http://localhost:4200") // 允许所有常用HTTP方法 .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 允许携带Cookie/Token等凭证 .allowCredentials(true) // 预检请求缓存1小时,减少OPTIONS请求次数 .maxAge(3600); } }; }
2. 移除分散的@CrossOrigin注解
直接删掉主类上的@CrossOrigin(origins = "*")和控制器上的@CrossOrigin(origins = "http://localhost:4200"),避免全局配置和局部注解的规则冲突。
3. 关于addMapping路径的疑问
不需要把addMapping设置为应用名称路径(比如/app-name/**),原因是:
- 如果网关配置了路径重写(比如把
/app-name/info/all转发到微服务的/info/all),微服务接收到的请求路径已经去掉了app-name前缀,只需要处理自己的接口路径即可 - 如果网关没有做路径重写,那微服务的接口路径本身就包含
app-name,此时addMapping("/**")也能覆盖到所有接口
4. 更优方案:统一在网关配置跨域
如果你的系统有网关层,建议直接在网关做全局跨域配置,这样所有微服务都不需要单独配置,更易于维护:
@Configuration public class GatewayCorsConfig { @Bean public CorsWebFilter corsWebFilter() { CorsConfiguration config = new CorsConfiguration(); config.setAllowedOrigins(Collections.singletonList("http://localhost:4200")); config.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE", "OPTIONS")); config.setAllowedHeaders(Arrays.asList("Authorization", "Content-Type", "Accept")); config.setAllowCredentials(true); config.setMaxAge(3600L); UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", config); return new CorsWebFilter(source); } }
配置网关跨域后,记得把所有微服务的跨域配置和@CrossOrigin注解都移除,避免冲突。
三、验证步骤
- 重启微服务(或网关)
- 用浏览器开发者工具查看请求的Network面板,检查OPTIONS预检请求是否返回200
- 确认带Token的请求能正常获取响应
内容的提问来源于stack exchange,提问作者Yeras_QazaQ
相关产品推荐
相关产品推荐

