CORS ajax跨域请求php简单完整案例一则

这篇文章发布于 2018年02月9日,星期五,00:29,归类于 JS实例。 阅读 42258 次, 今日 3 次 12 条评论

 

一、CORS: Cross-Origin Resource Sharing

CORS是Cross-Origin Resource Sharing的缩写,表示跨域的资源分享,不仅可以跨子域,就算域名长得完全不一样,也可以进行资源获取。

比较常见的应用之一就是Ajax跨域请求数据。

这个特性IE11开始支持:

ajax 跨域访问浏览器兼容性

和股市一样,大好河山一片绿,青青草原漫无边。

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

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

举个例子,假设我们服务端使用的是世界上最好的语言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://www.iknowu.com');

如果是多个域名,可以使用英文逗号进行分隔,和上面Access-Control-Allow-Methods的书写格式一致。

只要在PHP页面中进行了上面设置,剩下的工作就和传统的ajax请求基本上没有任何区别。

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

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

echo 'http://image.zhangxinxu.com/image/study/s/s128/mm'. rand(1,20) .'.jpg'; 
?>

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

var xhr = new XMLHttpRequest();
xhr.open('post', 'http://www.zhangxinxu.com/study/201802/cros-ajax.php');
xhr.onload = function () {
    console.log(xhr.responseText);
};
xhr.send(null);

我们就能请求到cors-ajax.php随机返回的图片地址。

眼见为实,您可以狠狠地点击这里:CORS ajax跨域请求测试demo/

可以看到,我们的demo测试页面地址是:http://zxx.xiliz.com/cors-ajax

也就是域名是zxx.xiliz.com,而请求的php页面域名是www.zhangxinxu.com,典型的跨域请求场景,下面看看会发生什么:

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

跨域ajax请求成功截图

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

噢耶!

三、结束语

小而美实用案例一则,给自己备个忘。

我蓦然一看,时间还算早,要不再随便扯点其他,刚又买了个域名canvasapi.cn,打算搞个canvasapi中文文档,不过应该抽不出那么多时间,这个计划90%+会流产,还是等以后再说吧。

下周就要过年了提前祝大家汪年快乐,万事如意。

(本篇完)

分享到:


发表评论(目前12 条评论)

  1. hdtopku说道:

    失败了

  2. 扛二蛋说道:

    张大神,示例请求失败了

  3. 二蛋说道:

    希望旭叔的计划不会流产!

  4. nnan说道:

    66666

  5. 波仔说道:

    旭哥的文章能不能设置下新窗口打开,或者给个设置按钮。
    经常需要比较下内容 , 还得手动脱过去。

  6. 蚊子老大说道:

    别流产,其实计划蛮好的

  7. ugrg说道:

    补充一下,
    正常情况下,使用cors的跨域名请求是不支持cookie的,要想开启这个功能,你需要再增加
    Header set Access-Control-Allow-Credentials true

    另外,IE7,IE8,IE9想要使用cors的话,可以考虑使用jquery.xdomainrequest.min.js来实现,当然了,这是一个jquery的插件,所以你的用jquery来请求.这个插件使用的是XDomainRequest模块来与服务器通讯

  8. lwwen说道:

    就是在php那边设置一下header?Access-Control-Allow-Origin?

  9. 刘东奇说道:

    新年快乐!