在实际项目开发中经常会遇到ajax跨域问题,跨域跨域顾名思义就是跨域名,比如我的开发环境是测试环境(a.####.com),后台给我的接口url地址是预发布环境(b.####.com),这个时候我在a域名下写的ajax去请求b域名下的地址就会产生跨域问题,造成无法返回结果。
为什么会造成无法跨域请求呢,就是JavaScript的同源策略在作怪。即JavaScript只能访问在同一域名下的内容,不同域名下的脚本不能互相访问,即便是子域也不行。
简诉两种经常采用的ajax跨域的解决办法:
- jsonp
jsonp 是一种json数据调用的方式,利用script标签可以跨域(Web页面上调用js文件时不受跨域的影响),用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住json数据。
这里就举例jquery ajax方法(公司使用的jquery):
$.ajax({
type: "get",
url: "跨域地址",
dataType: "jsonp",
jsonp: "jsoncallback",
success: function(data){
alert(data.XXX);
},
});
推荐一篇对jsonp写的比较透彻的文章:
http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html
但是jsonp只支持get请求,因此在文件的大小上有所限制。
- CORS
如果jsop不满足需求的话(承载信息量比较大只能用post),可以配置目标服务器的CORS:加header头
举例php的用法(公司使用的php):
header('Access-Control-Allow-Origin:*');
“*”号表示允许任何域向我们的服务端提交请求
或者
header('Access-Control-Allow-Origin:http://a.###.com');
限定只允许a.###.com 域名的请求。
- nginx反向代理