当前位置: 首页 > 前端技术 > 正文

CORS跨域资源共享,实现ajax跨域请求(php简单案例)

CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。目前,所有现代浏览器都支持该功能,IE浏览器需要IE11+。
CORS跨域资源共享,浏览器兼容性

ajax跨域请求的header设置和案例

和传统ajax请求相比,CORS跨域请求的偶尔工作量主要在数据接收方那一端,也就是在服务器端设置。

举个例子,假设我们服务端使用的是PHP语言,且ajax请求页面的名称是cors-ajax.php,那么,我们可以在此PHP页面进行如下header设置:

// 设置允许其他域名访问
header('Access-Control-Allow-Origin:*');  
// 设置允许的响应类型 
header('Access-Control-Allow-Methods:POST, GET');  
// 设置允许的响应头 
header('Access-Control-Allow-Headers:x-requested-with,content-type');

Access-Control-Allow-Origin:* 表示任何域名的请求,我都不会将别人拒之千里之外。通常实际项目中,我们这里会设置信任的域名,例如:
header('Access-Control-Allow-Origin:http://jmsbang.com');

如果是多个域名,可以使用英文逗号进行分隔,和上面Access-Control-Allow-Methods的书写格式一致。只要在PHP页面中进行了上面设置,剩下的工作就和传统的ajax请求基本上没有任何区别。

例如什么也不干,就随机返回一个图片地址:

<?php
// 刚出现的那些header... 

echo 'http://jmsbang.com/demo/img/w236_1'. rand(1,4) .'.png'; 
?>

此时我们随随便便建一个Html页面,写下下面这段极简的XMLHttpRequest请求JS代码:

// 请求方式随机
var method = Math.random() > 0.5 ? 'get' : 'post';
var xhr = new XMLHttpRequest();
xhr.open(method, 'http://jmsbang.com/demo/cors-ajax.php');
xhr.onload = function () {
	result.innerHTML = '<img src="'+ xhr.responseText +'" alt="" />';
};
xhr.send(null);

我们就能请求到cors-ajax.php随机返回的图片地址。眼见为实,您可以狠狠地点击这里:CORS ajax跨域请求测试demo

可以看到,我们的demo测试页面域名是www.ysichuan.com,而请求的php页面域名是jmsbang.com,典型的跨域请求场景,下面看看会发生什么:

点击demo页面上按钮,然后当当当当:

CORS ajax跨域请求测试demo

成功请求到了随机图片地址,并在页面上呈现图片出来。

与JSONP的比较

CORS与JSONP的使用目的相同,但是比JSONP更强大。

JSONP只支持GET请求,CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据。

CORS跨域资源共享,实现ajax跨域请求(php简单案例):等您来吐槽!

CORS跨域资源共享,实现ajax跨域请求(php简单案例):等您坐沙发呢!

发表评论

您必须 [ 登录 ] 才能发表留言!