springboot以配置跨域，vue请求跨域报错

### Spring Boot 配置跨域允许 Vue 请求 为了使 Spring Boot 应用能够正确处理来自 Vue 的跨域请求并解决 CORS 错误，可以通过多种方式进行配置。以下是几种常见的解决方案： #### 局部配置：使用 `@CrossOrigin` 注解 可以在具体的控制器类或方法上添加 `@CrossOrigin` 注解来实现局部的跨域支持。这种方式适用于特定接口的跨域需求。 ```java import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RestController; @RestController @CrossOrigin(origins = "http://localhost:8080") // 替换为前端Vue应用的实际地址 public class DepartmentController { @GetMapping("/depts") public List<String> getDepartments() { return Arrays.asList("Dept1", "Dept2", "Dept3"); } } ``` 这种方法简单易用，但对于全局范围内的跨域设置可能不够灵活[^2]。 #### 全局配置：通过 WebConfig 类 如果希望在整个应用程序范围内启用跨域支持，则可以创建一个自定义的 `WebMvcConfigurer` 实现类来进行全局配置。 ```java 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 WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") // 对所有路径生效 .allowedOrigins("http://localhost:8080") // 替换为实际的前端域名 .allowedMethods("GET", "POST", "PUT", "DELETE") // 支持的方法类型 .allowCredentials(true); // 是否允许携带凭证（Cookie） } } ``` 此方式更加全面且易于维护，尤其适合复杂的多模块项目[^1]。 #### 结合 Spring Security 使用 CorsFilter 当项目引入了 Spring Security 后，默认的安全策略可能会覆盖掉原有的 CORS 设置。因此需要显式地配置 `CorsConfigurationSource` 并将其注册到过滤器链中。 ```java import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.annotation.Bean; import org.springframework.security.config.annotation.web.builders.HttpSecurity; import org.springframework.security.config.http.SessionCreationPolicy; import org.springframework.security.web.SecurityFilterChain; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.UrlBasedCorsConfigurationSource; import org.springframework.web.filter.CorsFilter; import java.util.Arrays; public class SecurityConfig { @Bean public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception { http.csrf().disable() .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS) .and() .authorizeRequests().anyRequest().permitAll(); http.addFilterBefore(corsFilter(), UsernamePasswordAuthenticationFilter.class); return http.build(); } private CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); CorsConfiguration config = new CorsConfiguration(); config.setAllowCredentials(true); config.addAllowedOrigin("http://localhost:8080"); // 替换为实际的前端域名 config.addAllowedHeader("*"); config.addAllowedMethod("*"); source.registerCorsConfiguration("/**", config); return new CorsFilter(source); } } ``` 这种做法特别重要，在安全框架存在的情况下能有效防止因默认行为而导致的 CORS 报错现象[^3]。 --- ### 注意事项 - 如果设置了 `.allowCredentials(true)` ，则不允许将 `allowedOrigins` 设定为 `"*"` 。这会引发冲突，需指定确切的源地址。 - 确保前后端开发环境中使用的端口号一致或者按照实际情况调整上述代码中的 URL 地址部分。