Vue使用fetch调用Spring Data接口携带token仍返回403错误如何解决

你遇到的403错误以及Authorization头无法携带的核心问题出在fetch请求的mode: 'no-cors'配置上。
no-cors是用于跨域请求只需要获取资源但不需要读取响应内容的场景，该模式下浏览器会限制只能发送简单请求头，自定义的Authorization头不属于简单请求头范畴，会被浏览器直接拦截，不会发送到后端，自然后端拿不到token就返回403。

解决步骤 #

• 修改前端fetch配置
  删掉mode: 'no-cors'配置项，或者显式设置为mode: 'cors'，这是跨域请求携带自定义头的必要前提。
  修改后的请求示例：

fetch("http://localhost:9090/userByEmail?email="+this.state.userdata.email,{
    method: 'GET',
    mode : 'cors',
    headers: { 
        'Accept': 'application/json',
        'Authorization': 'Bearer 你的token'
    }
})

补充说明：GET请求无需设置Content-Type: application/json，该头仅用于标注请求体的格式，GET请求没有请求体。

• 配置后端Spring Security的跨域规则
  前后端分离跨域场景下，需要后端配置允许跨域请求、放行预检OPTIONS请求、允许Authorization头被识别：
  1. 开启Spring Security的CORS支持，同时放行所有OPTIONS类型的预检请求，示例配置：

@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .cors().and() // 启用CORS处理
            .csrf().disable() // 前后端分离项目无需启用CSRF防护
            .authorizeRequests()
            .antMatchers(HttpMethod.OPTIONS, "/**").permitAll() // 放行所有预检请求
            // 保留你原本的其他权限校验规则
            .anyRequest().authenticated();
    }
}

2. 添加全局CORS配置，允许前端地址访问、允许Authorization头传递：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                // 生产环境请替换为你的前端实际访问地址，不要写*
                .allowedOriginPatterns("http://localhost:8080") 
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*") // 允许所有请求头，包含Authorization
                .allowCredentials(true)
                .maxAge(3600); // 预检请求结果缓存1小时，避免重复发起预检
    }
}

如果只是单个接口需要跨域，也可以直接在对应的Controller类或者接口方法上添加@CrossOrigin(origins = "http://localhost:8080")注解，不需要写全局配置。

配置完成后重启后端服务，再发起请求就能正常携带Authorization头，不会再返回403。

内容的提问来源于stack exchange，提问作者Achille