js跨域访问,No ‘Access-Control-Allow-Origin‘ header is present on

js跨域访问,No ‘Access-Control-Allow-Origin‘ header is present on

在本地用ajax跨域访问请求时报错:


XMLHttpRequest cannot loadhttp://www.zjblogs.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.


查了一翻资料,发现原来是新W3C标准中是这样规定的:


最新的W3C标准里是这么实现HTTP跨域请求的, Cross-Origin Resource Sharing

简单的来说,就是跨域的目标服务器要返回一系列的Headers,通过这些Headers来控制是否同意跨域。这些Headers有:4 Syntax



在 Request 包和 Response 包中都有一些。

其中最敏感的就是 Access-Control-Allow-Origin 这个 Header, 他是W3C标准里用来检查该跨域请求是否可以被通过。 (Access Control Check)

跨域实现的过程大致如下:

从 http://www.a.com/test.html 发起一个跨域请求,

请求的地址为: http://www.b.com/test.php

如果 服务器B返回一个如下的header

Access-Control-Allow-Origin: http://www.a.com

那么,这个来自 http://www.a.com/test.html 的跨域请求就会被通过。


如上所知,总结解决办法如下:


1、如果请求的url是aspx页面,则需要在aspx页面中添加代码:Response.AddHeader("Access-Control-Allow-Origin", "*");


2、如果请求的url是PHP页面,则需要在PHP页面中添加代码:header("Access-Control-Allow-Origin: *");


3、如果请求的url是静态的html页面,则需要在页面中添加meta标签代码:<meta http-equiv="Access-Control-Allow-Origin" content="*" />


如果服务器端可以确定是要被哪些域名访问,最好是能把以上代码中的“*”代替为具体的域名,这样做可以相应的增强安全性。



转自: http://zjblogs.com/js/Access-Control-Allow-Origin.html
### 解决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、付费专栏及课程。

余额充值