Vue+Spring Boot跨域问题：No 'Access-Control-Allow-Origin' header错误求助

我来帮你捋捋这个CORS问题——你已经试了@CrossOrigin和全局CORS配置但没解决，大概率是配置细节没踩对，或者请求本身触发了特殊的预检逻辑。下面是几个你可能忽略的关键点：

1. 确保Spring Security的CORS配置优先级最高 #

Spring Security的过滤器链顺序非常关键，CORS配置必须放在csrf、认证等过滤器之前，否则预检请求会被拦截。给你一个正确的配置示例：

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .cors() // 这一步一定要放在最前面！
            .and()
            .csrf().disable() // 前后端分离场景通常关闭CSRF，注意生产环境的安全策略
            .authorizeRequests()
            .antMatchers("/signin").permitAll() // 登录接口必须允许匿名访问
            .anyRequest().authenticated();
    }

    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration config = new CorsConfiguration();
        // 必须指定具体的前端地址，不能用*（如果开了allowCredentials的话）
        config.setAllowedOrigins(Collections.singletonList("http://localhost:8080"));
        // 允许所有常用请求方法，包括OPTIONS预检请求
        config.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE", "OPTIONS"));
        // 允许请求携带的头信息，包括Content-Type和后续JWT的Authorization头
        config.setAllowedHeaders(Arrays.asList("Authorization", "Content-Type", "Accept"));
        // 关键！如果你的请求需要携带凭证（比如Cookie、JWT相关），必须开启这个
        config.setAllowCredentials(true);
        // 对所有接口生效
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return source;
    }
}

2. 检查Axios请求的凭证配置 #

前端Axios请求必须和后端的allowCredentials: true对应，否则CORS会直接失败。补全你的登录请求代码：

// Vue中的登录请求示例
axios.post('http://localhost:8082/signin', creds, {
    withCredentials: true, // 和后端的allowCredentials保持一致
    headers: {
        'Content-Type': 'application/json' // 如果是JSON格式请求，要指定这个头
    }
})
.then(response => {
    context.commit('SET_TOKEN', response.data.token);
    // 这里补全你的跳转逻辑
    // redirect(...)
})
.catch(error => {
    console.error('登录请求失败:', error);
});

注意：如果你的请求Content-Type是application/json，浏览器会自动发送OPTIONS预检请求，这时候后端必须正确响应OPTIONS请求——上面的全局配置已经包含了允许OPTIONS方法，所以只要配置生效就没问题。

3. 避免全局配置和@CrossOrigin注解冲突 #

如果你同时在控制器上用了@CrossOrigin("http://localhost:8080")和全局CORS配置，可能会出现冲突。建议暂时去掉控制器上的注解，只保留全局配置，先验证是否能解决问题。

4. 查看浏览器控制台的具体错误细节 #

有时候浏览器的错误提示会有更精准的信息，比如：

由于凭据模式为'include'，因此'Access-Control-Allow-Origin'不能为通配符'*'

这种情况就是你后端用了*作为允许的Origin，但同时开了allowCredentials: true——这时候必须指定具体的前端地址（比如http://localhost:8080）。

如果按照上面的步骤还是没解决，建议把完整的SecurityConfig代码和Axios请求代码贴出来，我再帮你进一步排查！

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