CORS(跨域资源共享)跨域问题及解决
2015-01-08 11:14
579 查看
当使用ajax跨域请求时,浏览器报错:XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin.肯定是跨域的问题,如果用jsonp或者proxy的方式进行修改的话未免需要太大的工程量,所以采用CORS这种比较简单高效的技术。相比JOSP的方式,CORS更为高效。JSONP由于它的原理只能实现GET请求,而CORS支持所有类型的HTTP请求。使用CORS,可以使用普通的ajax实现跨域,这对于前端来说是极大的福音了,这个技术被现在大多数浏览器所普遍支持,因为跨域已经是普遍的要求,浏览器肯定会逐渐流出适当的‘后门’出来专门用以跨域。
浏览器支持情况
经本人测试IE浏览器中IE10及以上才可正常发送请求
1.服务器端对于CORS的支持,是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,就可以允许Ajax进行跨域的访问,也就是相应的‘后门’。
设置Apache:Apache需要使用mod_headers模块来激活HTTP头的设置,它默认是激活的。你只需要修改Apache配置文件中的httpd.conf文件:
原始代码
<Directory />
AllowOverride none
Require all denied
</Directory>
改为下面代码
<Directory />
Require all denied
Header set Access-Control-Allow-Origin *
</Directory>
在处理请求的PHP文件中设置:
<?php
header("Access-Control-Allow-Origin:*");
//处理请求输出数据
?>
配置的含义是允许任何域发起的请求都可以获取当前服务器的数据。当然,这样有很大的危险性,恶意站点可能通过XSS攻击我们的服务器。所以我们应该尽量有针对性的对限制安全的来源,例如下面的设置使得只有http://wysblog.com/这个域才能跨域访问服务器的API。
httpd.conf中:
Header set Access-Control-Allow-Origin http://www.wysblog.com
php文件中:
前台代码:
浏览器支持情况
经本人测试IE浏览器中IE10及以上才可正常发送请求
1.服务器端对于CORS的支持,是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,就可以允许Ajax进行跨域的访问,也就是相应的‘后门’。
设置Apache:Apache需要使用mod_headers模块来激活HTTP头的设置,它默认是激活的。你只需要修改Apache配置文件中的httpd.conf文件:
原始代码
<Directory />
AllowOverride none
Require all denied
</Directory>
改为下面代码
<Directory />
Require all denied
Header set Access-Control-Allow-Origin *
</Directory>
在处理请求的PHP文件中设置:
<?php
header("Access-Control-Allow-Origin:*");
//处理请求输出数据
?>
配置的含义是允许任何域发起的请求都可以获取当前服务器的数据。当然,这样有很大的危险性,恶意站点可能通过XSS攻击我们的服务器。所以我们应该尽量有针对性的对限制安全的来源,例如下面的设置使得只有http://wysblog.com/这个域才能跨域访问服务器的API。
httpd.conf中:
Header set Access-Control-Allow-Origin http://www.wysblog.com
php文件中:
<?php header("Access-Control-Allow-Origin:http://www.wysblog.com");
前台代码:
<script type="text/javascript"> function createCORSRequest(method, url) { var xhr = new XMLHttpRequest(); if ("withCredentials" in xhr) { // 此时即支持CORS的情况 // 检查XMLHttpRequest对象是否有“withCredentials”属性 // “withCredentials”仅存在于XMLHTTPRequest level 2对象里 } else { // 否则检查是否支持XDomainRequest // XDomainRequest仅存在于IE中,是IE用于支持CORS请求的方式 xhr = new XDomainRequest(); } xhr.open(method, url, true); xhr.send(); xhr.onload = function(){ alert(xhr.responseText); } } createCORSRequest('GET', "http://192.168.1.58/t.php"); </script>
相关文章推荐
- 跨域资源共享(CORS)问题解决
- 跨域资源共享(CORS)问题解决方案
- Java服务端Cors跨域资源共享配置,解决与Spring Security冲突引起的问题
- 解决ajax跨域请求的问题-cors(资源共享方案)
- java服务端解决js跨域的问题 CORS(跨域资源共享) 的配置
- 解决前后端分离的 CORS 跨域资源共享问题
- Java服务端Cors跨域资源共享配置,解决与Spring Security冲突引起的问题
- 可以将资源移动到相同的域名上或者启用 CORS 来解决这个问题(跨域问题)、options请求报错
- 跨域资源共享CORS以及在zepto中使用遇到的问题
- 跨域资源共享问题 tomcat7.0配置CORS(跨域资源共享)
- 跨域问题 XHR实现跨域资源共享(CORS)
- 浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
- win7问题解决,凭据管理器和无法访问,不允许一个用户使用一个以上用户名与服务器或共享资源进行多重连接。
- 跨域问题及解决(2)——CORS
- [CORS:跨域资源共享] 同源策略与JSONP
- 跨域资源共享(CORS)在ASP.NET Web API中是如何实现的?
- HTML5安全:CORS(跨域资源共享)简介
- win7问题解决,凭据管理器和无法访问,不允许一个用户使用一个以上用户名与服务器或共享资源进行多重连接。
- 使用HTML5 跨域共享特性解决AJAX跨域数据同步问题
- 跨域资源共享(CORS)在ASP.NET Web API中是如何实现的?