ajax 跨域的几种解决办法

前端之家收集整理的这篇文章主要介绍了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)";
原文链接:https://www.f2er.com/ajax/162098.html

猜你在找的Ajax相关文章