码迷,mamicode.com
首页 > 其他好文 > 详细

CORS(跨域资源共享)跨域问题及解决

时间:2015-01-08 13:16:01      阅读:130      评论:0      收藏:0      [点我收藏+]

标签:

当使用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 *

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(跨域资源共享)跨域问题及解决

标签:

原文地址:http://www.cnblogs.com/owys/p/4210365.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!