javascript 通过发送http头信息跨域
极客学长 2016-03-30 0
javascript
跨域
从古至今，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
测试了以下，果然是可以跨域的，没有问题。下面贴上测试代码
前端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js跨域请求测试</title>
<script src="jquery.js"></script>
</head>
<body>
<script>
$.post("http://www.test.my/cross-domain/post.php", {
username : "zhangsan",
password : "123456"
}, function(data) {
console.log(data);
}, "json");
</script>
</body>
</html>
后端代码（别问我为什么用php，因为php是最好的语言O(∩_∩)O~）
<?php
//发送跨域头信息,指定允许其他域名访问
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"}
本站博文如非注明转载则均属作者原创文章，引用或转载无需申请版权或者注明出处，如需联系作者请加微信： geekmaster01