使用HTML5 跨域共享特性解决AJAX跨域数据同步问题
来源:互联网 发布:js验证用户名字母开头 编辑:程序博客网 时间:2024/06/05 08:22
HTML 5以前的标准由于考虑到浏览器安全问题并不允许直接跨域通信,于是为了达到跨域通信的目的各种蛋疼的解决办法出现了,常用的有:jsonp、使用代理文件、地址栏hash等等,这些办法的出现在达到解决跨域问题的同时,也增加了前端页面的性能开销和维护成本。HTML5新的标准中,增加了” Cross-Origin Resource Sharing”特性,这个特性的出现使得跨域通信只需通过配置http协议头来即可解决。
Cross-Origin Resource Sharing 详细解释见:
http://dvcs.w3.org/hg/cors/raw-file/tip/Overview.html
Cross-Origin Resource Sharing实现的最重要的一点就是对参数” Access-Control-Allow-Origin”的配置,即通过 次参数检查该跨域请求是否可以被通过。
如:Access-Control-Allow-Origin:http://a.com表示允许a.com下的域名跨域访问;
Access-Control-Allow-Origin:*表示允许所有的域名跨域访问。
如果需要读取读取cookie:
需要配置参数:Access-Control-Allow-Credentials:true
同时在xhr发起请求的时候设置参数withCredentials为true:
var xhr = new XMLHttpRequest();
xhr.open();
xhr.withCredentials = true; //这个放在xhr.open后面执行,否则有些浏览器部分版本会异常,导致设置无效。
示例代码:
php:
header(
'Access-Control-Allow-Origin:http: //a.com'
);
header(
'Access-Control-Allow-Methods:POST,GET'
);
header(
'Access-Control-Allow-Credentials:true'
);
echo
'Cross-domain Ajax'
;
JS:
var
xhr =
new
XMLHttpRequest(); ;
xhr.open(
'GET'
,
'http: //b.com/cros/ajax.php'
,
true
);
xhr.withCredentials =
true
;
xhr.onload =
function
() {
alert(xhr.response);
//reposHTML;
};
xhr.onerror =
function
() {
alert(
'error making the request.'
);
};
xhr.send();
- 使用HTML5 跨域共享特性解决AJAX跨域数据同步问题
- 使用HTML5 跨域共享特性解决AJAX跨域数据同步问题
- html5 新特性ajax跨域的问题和处理
- 使用HTML5 的跨域通信机制进行数据同步
- 使用PHP解决AJAX跨域问题
- synchronized解决多线程共享数据同步问题
- HTML5项目笔记8:使用HTML5 的跨域通信机制进行数据同步
- HTML5解决跨域问题
- ajax是什么? ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?
- 解决ajax跨域获取数据的问题
- 解决ajax跨域请求数据cookie丢失问题
- 解决AJAX跨域问题
- 解决ajax跨域问题
- 解决ajax跨域问题
- 解决Ajax跨域问题
- Ajax跨域问题 解决
- 解决ajax跨域问题
- 解决ajax跨域问题
- 反向代理服务器[转载]
- Ubuntu 使用QQ汇总
- ARM 常见问题
- C++笔试题(二)
- popwindow显示可从上往下拉的仿抽屉式控件
- 使用HTML5 跨域共享特性解决AJAX跨域数据同步问题
- 利用OpenCV对图像旋转
- linux下实现CPU使用率和内存使用率获取方法
- C++ Builder与Visual C++孰优孰劣
- vector的内存分配行为
- LeetCode(Oct28'12):Populating Next Right Pointers in Each Node II
- uva 11111
- C++ 计时器 单位
- 如何用Selenium的AndroidDriver在Andrioid模拟器上进行自动化测试