从古至今,javascript ajax跨域问题一直是比较纠结的一个问题,虽然说网上有各种解决方案,包括设置域名,和jsonp方案,但是始终觉得实现起来有点小麻烦,html5出来之后就有一种新的解决方案,简单,粗暴,我喜欢。
到底是怎么回事呢,简单来说就是通过后端发送http头信息来解决前端的跨域操作。在网上搜索了一下这个跨域的头信息,几乎90%的都是:
Access-Control-Allow-Origin:*
哥一下兴喜万分啊,于是赶紧试了一下,结果发现病没什么卵用,还是提示:
XMLHttpRequest cannot load http://www.test.my/cross-domain/post.php.
Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers.
显然,跨域是没有成功的。于是赶紧又去google了一下 “javascript 跨域头信息”, 结果发现有有篇博客上有写到需要加上以下头信息
Access-Control-Allow-Headers:x-requested-with,content-type
测试了以下,果然是可以跨域的,没有问题。下面贴上测试代码
前端代码:
js跨域请求测试$.post("http://www.test.my/cross-domain/post.php", {
username : "zhangsan",
password : "123456"
}, function(data) {
console.log(data);
}, "json");
后端代码(别问我为什么用php,因为php是最好的语言O(∩_∩)O~)
//发送跨域头信息,指定允许其他域名访问
header('Access-Control-Allow-Origin:*');
// 响应类型,这里可以指定,也可以不指定,不过个人觉得还是指定好一些
header('Access-Control-Allow-Methods:POST');
// 响应头设置
header('Access-Control-Allow-Headers:x-requested-with,content-type');
echo json_encode($_POST);
浏览器输出的相应
Object {username: “zhangsan”, password: “123456”}