Apache中配置支持CORS(跨域资源共享)实例
程序员文章站
2022-05-30 18:39:50
当使用ajax跨域请求时,浏览器报错:xmlhttprequest error: origin null is not allowed by access-control-...
当使用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攻击我们的服务器。所以我们应该尽量有针对性的对限制安全的来源,例如下面的设置使得只有这个域才能跨域访问服务器的api。
httpd.conf中:
复制代码 代码如下:
header set access-control-allow-origin //www.jb51.net
php文件中:
复制代码 代码如下:
<?php
header("access-control-allow-origin://www.jb51.net");
前台代码:
复制代码 代码如下:
<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>