谁说ajax不能跨域

大家都知道为了安全起见，浏览器是不支持ajax跨域请求的，小伙伴们为了解决跨域请求，一般会用jsonp的方式，那么除了jsonp以外，真的就解决不了跨域吗？当然不是，其实ajax也是可以跨域请求的。只不过这一点是在后来才支持的，而且需要一定的http协议的知识基础。那么闲话不多说，接下来开始Coding!!!

先来看看前台代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf8'>
    <title></title>
    <script src="http://static.wkimg.com/common/lib/jquery/1.8.3/jquery.min.js"></script>
    <script>
        $(function(){
            var theurl='http://www.myhost.com/jsonp/ajaxCrossDomain.php';
            var params={};
            params.name='Lilei';
            params.age='28';

            $('#click').bind('click',function(){
                $.ajax({
                    type: "POST",
                    url: theurl,
                    data:params,
                    dataType: "json",
                    success: function(json) {
                         $('h1').html('yourname:'+json.name+'---yourage:'+json.age);
                    }
                });
            });
        });
    </script>
</head>
<body>

<a href="javascript:;" target="_self" id="click">点击测试</a>
<h1 id="back_data"></h1>

</body>
</html>

后台代码

<?php
$bak_data=json_encode($_POST);
echo $bak_data;

接下来我们测试一下如下图。

跨域失败

如图所示，其实是访问并没失败，但是数据并没有回来。报错中告诉你在请求的资源中没有允许该Access-Control-Allow-Origin。那么接下来其实只要我们在服务端指定一下就可以了。

更改后代码：

<?php
$bak_data=json_encode($_POST);
header("Access-Control-Allow-Origin:http://localhost");
echo $bak_data;

接下来我们再请求如图：

跨域成功

在服务端允许了来自该域名的请求后，我们就能正常的使用ajax进行前后交互了。

猜你喜欢