js实现跨域的几种方法汇总(图片ping、JSONP和CORS)


Posted in Javascript onOctober 25, 2015

跨域

虽然有同源策略的存在,但是在js中跨域也依然很常见,有document.domain、window.name、图片ping、jsonp、CORS,在这里简单总结下图片ping、jsonp和CORS备忘。

图片ping

图片可以从任何URL中加载,所以将img的src设置成其他域的URL,即可以实现简单的跨域,可以使用onload和onerror事件来确定是否接受到了响应。

var img=new Image();
img.src='https://3water.com';
img.onerror=function(){
 alert('error');
}
img.onload=function(){
 alert('success');
}

这里新建了一个img对象,给出的url是博客地址,这里是个error事件,所以弹出error;如果将URL改为一张图片http://images.3water.com//710118/o_MacBook%20Air.png,就会弹出onload加载信息success,从而实现了简单的跨域。

使用图片ping跨域只能发送get请求,并且不能访问响应的文本,只能监听是否响应而已,可以用来追踪广告点击。

jsonp

jsonp是带有回调函数callback的json,原名json with padding,翻译是填充式json,参数式json。

因为script的src可以跨域,所以在发送的URL后添加一个callback参数传递给服务器,然后服务器返回的数据会作为callback的参数,因为这个callback是我们自己来实现的,所以可以对接受到的json数据进行处理。

简单代码如下:

<script type="text/javascript">
function call(data){
 alert(data.city);
}
</script>
<script type="text/javascript" src='http://freegeoip.net/json/?callback=call'></script>

这里,我们把脚本的src设置为http://freegeoip.net/json/?callback=call,这是一个获取用户ip地址的api(有兴趣的可以点击这里查看),然后将callback作为一个参数拼接在URL后,返回的json数据就会作为callback的参数,在这里callback我们定义为call函数,即返回的json数据就会作为call的参数传进去,这个call函数仅仅弹出用户的城市city。笔者这里的输出结果是河北。其他ip信息可以查看官网,上面有详细的列表,比如country_name,time_zone等。

CORS(跨资源共享)

CORS是跨资源共享,cross site resourse sharing,它和ajax其实是大体相同的,对于ie实例化的是xdr对象,XDomainRequest,我们能访问的也只有responseText,触发的事件有load和error,写法和xhr大体相同,也需要open和send。

对于ff,chrome等其他浏览器实例化的是xhr,在这里myvin仅仅拿xhr来演示下,如果要实现跨浏览器,可以配合xdr实现兼容。

xhr如下:

var xhr=new XMLHttpRequest();   
var url="https://3water.com";
xhr.open('GET', url); 
xhr.send(null);

这里使用的url是https://3water.com,和ajax唯一的区别就是url使用的是跨域的绝对地址,在ajax中使用的本页面内的相对地址或绝对地址。

看一下控制台,这里用的是ff40.0.3,显示信息如下:

已阻止跨源请求:同源策略禁止读取位于 https://3water.com 的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')。

所以用CORS实现跨域还有一步要做,就是在服务器端设置Access-Control-Allow-Origin。

Javascript 相关文章推荐
“不能执行已释放的Script代码”错误的原因及解决办法
Sep 09 Javascript
JS动态添加option和删除option(附实例代码)
Apr 01 Javascript
jQuery对html元素取值与赋值的方法
Nov 20 Javascript
文本域光标操作的jQuery扩展分享
Mar 10 Javascript
js中把JSON字符串转换成JSON对象最好的方法
Mar 21 Javascript
JavaScript实现的双向跨域插件分享
Jan 31 Javascript
JavaScript中for循环的使用详解
Jun 03 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
Oct 10 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 Javascript
在React 组件中使用Echarts的示例代码
Nov 08 Javascript
微信小程序利用云函数获取手机号码
Dec 17 Javascript
微信小程序实现录音Record功能
May 09 Javascript
详解JavaScript编程中的数组结构
Oct 24 #Javascript
向JavaScript的数组中添加元素的方法小结
Oct 24 #Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 #Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 #Javascript
JavaScript中数组的合并以及排序实现示例
Oct 24 #Javascript
使用javaScript动态加载Js文件和Css文件
Oct 24 #Javascript
js判断日期时间有效性的方法
Oct 24 #Javascript
You might like
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
php中使用key,value,current,next和prev函数遍历数组的方法
2015/03/17 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
兼容ie和firefox js关闭代码
2008/12/11 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
js 幻灯片的实现
2011/12/06 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
一段非常简单的js判断浏览器的内核
2014/08/17 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
javaScript语法总结
2016/11/25 Javascript
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
python写xml文件的操作实例
2014/10/05 Python
Python入门篇之对象类型
2014/10/17 Python
python用来获得图片exif信息的库实例分析
2015/03/16 Python
浅析Python多线程下的变量问题
2015/04/28 Python
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
python删除字符串中指定字符的方法
2018/08/13 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
基于python 微信小程序之获取已存在模板消息列表
2019/08/05 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
django框架ModelForm组件用法详解
2019/12/11 Python
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
2016/08/25 HTML / CSS
英国最大的邮寄种子和植物公司:Thompson & Morgan
2017/09/21 全球购物
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
新闻记者实习自我鉴定
2013/09/19 职场文书
实习生个人找工作的自我评价
2013/10/30 职场文书
优秀员工获奖感言
2014/03/01 职场文书
公务员四风问题对照检查材料整改措施
2014/09/26 职场文书
先进集体事迹材料范文
2014/12/25 职场文书
论文致谢词范文
2015/05/14 职场文书
JS高级程序设计之class继承重点详解
2022/07/07 Javascript