跨域这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容),因为我们在日常的项目开发时会不可避免的需要进行跨域操作,所以跨域能力也算是前端工程师的基本功之一。
原文链接:https://www.f2er.com/ajax/162098.html
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");
兼容:
cors在移动终端支持的不错,可以考虑在移动端全面尝试;
PC上有不兼容和没有完美支持,所以小心踩坑。
当然浏览器兼容就是个伪命题,说不准某个浏览器的某个版本就完美兼容了,说不准就有点小坑,尼玛伤不起!
2.JSONP解决方案
前端程序:
服务端程序:
$.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)";