ajax 跨域的几种解决办法

    跨域这词在前端界出现的频率不低，主要原因还是由于安全限制(同源策略， 即JavaScript或Cookie只能访问同域下的内容)，因为我们在日常的项目开发时会不可避免的需要进行跨域操作，所以跨域能力也算是前端工程师的基本功之一。

1.  CORS解决方案

    原理：CORS定义一种跨域访问的机制，可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。

    方法：

    任何域向服务端提交请求： header(" Access-Control-Allow-Origin:*");  

    指定域名向服务端提交请求： header(" Access-Control-Allow-Origin:www.baidu.com");  

    允许PUT方法： header("Access-Control-Allow-Methods:PUT");

    万能方法：

    header("Access-Control-Allow-Origin:*");
    header("Access-Control-Allow-Headers:Origin,X-Requested-With,Content-Type,Accept");
    header("Access-Control-Allow-Methods:DELETE,PUT");

    

    跨域错误提示：Request header field Content-Type is not allowed by Access-Control-Allow-Headers

     

    兼容：

     cors在移动终端支持的不错，可以考虑在移动端全面尝试；

        PC上有不兼容和没有完美支持，所以小心踩坑。

        当然浏览器兼容就是个伪命题，说不准某个浏览器的某个版本就完美兼容了，说不准就有点小坑，尼玛伤不起！

 

2.JSONP解决方案

   和大多数跨域的解决方案一样，JSONP也是我的选择，但是缺点是不支持POST请求。

 前端程序： 

$.ajax({
        url:"http://chen.qingclouds.cn/index.php?svc=live&cmd=list",
        dataType:'jsonp',
        data:{pageIndex:1,pageSize:20},
        jsonp:'callback',
        success:function(result) {
            for(var i in result) {
                alert(i+":"+result[i]);
            }
        },
    });

服务端程序：

$_GET['callback']."($result)";