spring boot 跨域  No ‘Access-Control-Allow-Origin‘ header is present on the requested resource

本文介绍了解决跨域问题的方法,包括在Controller层使用@CrossOrigin注解和通过设置响应头来允许特定源的请求,这对于理解和处理前端与后端交互中的跨域限制非常关键。

 No 'Access-Control-Allow-Origin' header is present on the requested resource

解决方案:在 Controller层的类上增加@CrossOrign注解 或者在 指定的 @XXXMapping 上加 @CrossOrign注解

@CrossOrigin
@PostMapping("/largeScreen/logout")
public ResponseResult logout(String username, String token){

……
……

}


或者


@CrossOrigin
@RestController
@RequestMapping("/aaaa")
public class aaaDataController {

……
……
……
……

}

 

 Access to XMLHttpRequest at 'https://xxxx.com/xxxx' from origin 'https://bbbb.com' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

解决方案: 

response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
response.setHeader("Access-Control-Allow-Credentials","true");
axios.defaults.withCredentials = false;

 

### 解决OAuth服务请求中的CORS错误 当遇到`No 'Access-Control-Allow-Origin' header is present on the requested resource.`这类错误时,表明浏览器的安全机制——即同源策略(Same-Origin Policy),正在阻止当前页面向另一个源发送请求[^3]。 对于基于Spring Security OAuth2实现的前后端分离应用,在Vue前端通过Axios发起带有凭证(Credentials)的请求(`withCredentials=true`)到后端API时,如果未正确设置CORS响应头,则会触发上述错误。为了使此类请求成功执行,需要满足以下几个条件: - **精确匹配Origin**: 如果前端设置了`withCredentials=true`,那么后端不能简单地将`Access-Control-Allow-Origin`设为通配符`*`,而应该将其设定为目标站点的具体URL。 - **启用凭证支持**: 需要在响应头部加入`Access-Control-Allow-Credentials: true`以允许携带身份验证信息(如Cookies)[^4]。 - **自定义请求头处理**: 若前端请求包含了特定的HTTP头部字段,比如Authorization或其他自定义头部,这些也应在预检请求(PREFLIGHT REQUEST)中被声明,并由服务器端在`Access-Control-Allow-Headers`中予以确认。 针对Java Spring Boot框架下的解决方案可以如下所示配置全局CORS过滤器: ```java @Bean public CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); CorsConfiguration config = new CorsConfiguration(); // 设置可信任的客户端名列表 List<String> allowedOrigins = Arrays.asList("http://example.com"); config.setAllowedOrigins(allowedOrigins); // 允许所有的HTTP方法(GET, POST, PUT, DELETE...) config.addAllowedMethod("*"); // 支持带cookie等认证信息的调用 config.setAllowCredentials(true); // 对于预检请求,允许哪些header可以通过 config.setAllowedHeaders(Arrays.asList( "Content-Type", "X-Requested-With", "accept", "origin", "authorization" )); source.registerCorsConfiguration("/api/**", config); // 应用于/api路径下的所有接口 return new CorsFilter(source); } ``` 以上代码片段展示了如何创建并注册一个适用于整个应用程序API接口的CORS过滤器实例。请注意替换`"http://example.com"`为你实际使用的前端地址以及调整其他参数适应具体的业务场景需求。 #### 关键点总结 - 浏览器实施严格的同源政策来保护用户免受潜在攻击; - 资源共享(CORS)提供了一种安全的方式让不同源之间互相通信; - 在涉及敏感操作(如登录状态保持)的情况下,必须显式指明可信的来源并且开启凭证共享选项; - 后端应当根据实际情况灵活调整CORS策略,既保障安全性又不影响正常功能使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值