内容字号:默认大号超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到微软雅黑切换到宋体

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

2018-02-13 16:55 出处:清屏网 人气: 评论(0

一、CORS: Cross-Origin Resource Sharing

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

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

这个特性IE11开始支持:

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

二、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页面上按钮,然后当当当当:

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

噢耶!

三、结束语

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

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

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

 

分享给小伙伴们:
本文标签: CORSajax跨域请求php

相关文章

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

CopyRight © 2015-2016 QingPingShan.com , All Rights Reserved.

清屏网 版权所有 豫ICP备15026204号