配置了跨域仍旧报错403

当你发现自己虽然正确的配置了跨域。比如说加了@CrossOrigin注解,但是仍旧前端跨域爆红的时候,也许并不是跨域本身的问题,而是传参类型错误。

这可能是一种误报,但是比如说前端给的数据是Params过来的一个数组,但是它实际上是以一个Map<格式过来的参数,所以你接数据的时候需要用键值对接。否则就会出现403错误,而实际上你的参数永远都没有正确的传入后端接口中,更别提回馈了,这种错误将会在预检时直接爆出,没有状态码,但是你的浏览器Console上面写的是403错误,跨域问题。

### 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 地址部分。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值
OSZAR »