别再被跨域坑了！Spring Boot 跨域配置一文搞定

什么是跨域？为什么要配？

你前端项目跑在 localhost:3000，后端接口在 localhost:8080，虽然是同一台电脑，但浏览器会觉得你们是“不同域”，默认就拦了请求。

“兄弟，你不是我这个域的，我不能让你进来。” —— 浏览器安全策略

所以我们要告诉后端：“这个前端是自己人，放他进来。”

推荐方式：写一个全局跨域配置类，一次搞定所有接口

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 所有路径都可以跨域
                .allowedOriginPatterns("*") // 哪些域名可以访问（* 表示全部）
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 支持的方法
                .allowedHeaders("*") // 允许的请求头
                .allowCredentials(true); // 允许携带 cookie
    }
}

适合绝大多数后端项目用这一个就够了。

更细粒度控制：单个接口用 @CrossOrigin

@CrossOrigin(origins = "http://localhost:3000") // 指定允许跨域的前端地址
@GetMapping("/api/hello")
public String hello() {
    return "Hello from backend!";
}

适合小项目或测试阶段，不想全局放开时用。

如果用了 Spring Security，还要加一段配置

@Override
protected void configure(HttpSecurity http) throws Exception {
    http.cors(); // 开启 Spring Security 对 CORS 的支持
}

@Bean
public CorsConfigurationSource corsConfigurationSource() {
    CorsConfiguration config = new CorsConfiguration();
    config.addAllowedOrigin("*");
    config.addAllowedMethod("*");
    config.addAllowedHeader("*");
    config.setAllowCredentials(true);

    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", config);
    return source;
}

总结一句话

前端请求后端接口跨域时，如果你遇到：

报错 No 'Access-Control-Allow-Origin' header...

预检请求 OPTIONS 被拦

前端调试本地接口很卡

那就赶紧配置一下 CORS，后端一句配置，前端畅通无阻

作者：非鱼牛马社

链接：https://juejin.cn

https://www.zuocode.com

+友情链接