javascript 跨域问题以及解决办法


Posted in Javascript onJuly 17, 2017

javascript 跨域问题以及解决办法

什么是跨域问题?

跨域这个问题是由于浏览器的同源策略引起的,请求的URL地址,必须与浏览器的URL是相同协议、相同域名、相同端口的,否则是不允许访问的

浏览器URL 要访问的URL 结果
http://www.123.com/index http://www.123.com/server 成功
http://www.123.com/index http://www.456.com/server 域名不相同,跨域
http://www.123.com:8080/index http://www.123.com:8888/index.htm 端口不同,跨域
http://www.123.com/index https://www.123.com/index 协议不同,跨域

解决办法

凡是拥有src属性的标签都可以跨域,比如script、img、iframe标签

JSONP

JSONP就是应用了script标签,JSONP的全称是JSON With Padding,JSONP由两部分组成,回掉函数和数据,回掉函数就是当响应到来时应该在页面中调用的函数,回掉函数的名字是在请求中指定的,而数据就是传入回掉函数的JSON数据

例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
  function jsonCallback(data){
    alert(data);
  };
  var url = "http://localhost:8888/test?callback=jsonCallback";
  var script = document.createElement('script'); 
  script.type = "text/javascript";
  script.setAttribute('src', url); 
  document.getElementsByTagName('head')[0].appendChild(script);
</script>
</head>
<body>
</body>
</html>

缺点:确认JSONP请求是否失败并不容易

​ 安全性的问题,JSONP是从其他域加载代码执行,所以要确定其可靠性

以上就是javascript 跨域问题以及解决办法的讲解,大家如果 有疑问可以留言讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
通过JAVASCRIPT读取ASP设定的COOKIE
Nov 24 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
Jul 31 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
May 18 Javascript
JavaScript中提前声明变量或函数例子
Nov 12 Javascript
javascript的列表切换【实现代码】
May 03 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
Aug 08 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
May 04 Javascript
原生JS实现图片懒加载(lazyload)实例
Jun 13 Javascript
详解前端路由实现与react-router使用姿势
Aug 07 Javascript
深入理解React中何时使用箭头函数
Aug 23 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
Oct 28 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
Jul 17 #Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
Jul 17 #Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
Jul 17 #Javascript
js学使用setTimeout实现轮循动画
Jul 17 #Javascript
详解Vue2.x-directive的学习笔记
Jul 17 #Javascript
javascript  数组排序与对象排序的实例
Jul 17 #Javascript
jQuery常用选择器详解
Jul 17 #jQuery
You might like
第十三节 对象串行化 [13]
2006/10/09 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
PHP基于curl实现模拟微信浏览器打开微信链接的方法示例
2019/02/15 PHP
PHP实现获取ip地址的5种方法,以及插入用户登录日志操作示例
2019/02/28 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
根据地区不同显示时间的javascript代码
2007/08/13 Javascript
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
jQuery中empty()方法用法实例
2015/01/16 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
js计算德州扑克牌面值的方法
2015/03/04 Javascript
JavaScript将数字转换成大写中文的方法
2015/03/23 Javascript
javascript中Date format(js日期格式化)方法小结
2015/12/17 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
2020/03/26 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
BootStrap入门教程(三)之响应式原理
2016/09/19 Javascript
js初始化验证实例详解
2016/11/26 Javascript
jquery,js简单实现类似Angular.js双向绑定
2017/01/13 Javascript
jQuery动态生成不规则表格(前后端)
2017/02/21 Javascript
javascript Function函数理解与实战
2017/12/01 Javascript
小程序实现列表删除功能
2018/10/30 Javascript
用Python3创建httpServer的简单方法
2018/06/04 Python
基于数据归一化以及Python实现方式
2018/07/11 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
Numpy 多维数据数组的实现
2020/06/18 Python
Python + opencv对拍照得到的图片进行背景去除的实现方法
2020/11/18 Python
python制作微博图片爬取工具
2021/01/16 Python
Python+Appium实现自动化清理微信僵尸好友的方法
2021/02/04 Python
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
使用html5制作loading图的示例
2014/04/14 HTML / CSS
POS解决方案:MUNBYN(热敏打印机、条形码扫描仪)
2020/06/09 全球购物
公司年会晚宴演讲稿
2014/01/06 职场文书
服务宗旨标语
2014/07/01 职场文书
铅球加油稿100字
2014/09/26 职场文书