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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
Dec 23 Javascript
为Extjs加加速(javascript加速)
Aug 19 Javascript
js当一个变量为函数时 应该注意的一点细节小结
Dec 29 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 Javascript
返回页面顶部top按钮通过锚点实现(自写)
Aug 30 Javascript
js操作iframe父子窗体示例
May 22 Javascript
js常用数组操作方法简明总结
Jun 20 Javascript
javascript动态添加checkbox复选框的方法
Dec 23 Javascript
javascript的几种写法总结
Sep 30 Javascript
JS中图片压缩的方法小结
Nov 14 Javascript
关闭Vue计算属性自带的缓存功能方法
Mar 02 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 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
php 攻击方法之谈php+mysql注射语句构造
2009/10/30 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
JavaScript开发规范要求(规范化代码)
2010/08/16 Javascript
jquery中获取元素的几种方式小结
2011/07/05 Javascript
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
深入理解JavaScript 闭包究竟是什么
2013/04/12 Javascript
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
超级好用的jQuery圆角插件 Corner速成
2014/08/31 Javascript
sails框架的学习指南
2014/12/22 Javascript
浅谈JavaScript function函数种类
2014/12/29 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
2015/08/06 Javascript
详解iframe与frame的区别
2016/01/13 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
详解Node.js:events事件模块
2016/11/24 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
2017/07/11 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
WebSocket的通信过程与实现方法详解
2018/04/29 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
2018/05/02 Javascript
vue中$nextTick的用法讲解
2019/01/17 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
python实现井字棋游戏
2020/03/30 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
python实现简单俄罗斯方块
2020/03/13 Python
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
法院实习人员自我鉴定
2013/09/26 职场文书
护理学毕业生求职信
2013/11/14 职场文书
酒店秘书求职信范文
2014/02/17 职场文书
法律七进实施方案
2014/03/15 职场文书
婚前协议书怎么写
2014/04/15 职场文书
2014镇党委书记党建工作汇报材料
2014/11/02 职场文书
海上钢琴师观后感
2015/06/03 职场文书
PHP策略模式写法
2021/04/01 PHP