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 相关文章推荐
Ext 今日学习总结
Sep 19 Javascript
javascript(js)的小数点乘法除法问题详解
Mar 07 Javascript
jQuery统计指定子元素数量的方法
Mar 17 Javascript
JavaScript实现彩虹文字效果的方法
Apr 16 Javascript
讲解JavaScript中for...in语句的使用方法
Jun 03 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
深入理解JavaScript函数参数(推荐)
Jul 26 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 Javascript
React+Redux实现简单的待办事项列表ToDoList
Sep 29 Javascript
JS如何实现动态添加的元素绑定事件
Nov 12 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
May 10 Javascript
element中el-container容器与div布局区分详解
May 13 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(二)
2012/03/21 PHP
基于php无限分类的深入理解
2013/06/02 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
PHP超级全局变量【$GLOBALS,$_SERVER,$_REQUEST等】用法实例分析
2019/12/11 PHP
jQuery常用数据处理方法小结
2015/02/20 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
2016/03/05 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
canvas 绘制圆形时钟
2017/02/22 Javascript
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
vue实现单一筛选、删除筛选条件
2020/10/26 Javascript
[01:26]神话结束了,却也刚刚开始——DOTA2新英雄玛尔斯驾临战场
2019/03/10 DOTA
python计算方程式根的方法
2015/05/07 Python
Python实现冒泡排序的简单应用示例
2017/12/11 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
基于python的Paxos算法实现
2019/07/03 Python
Python的Tkinter点击按钮触发事件的例子
2019/07/19 Python
利用Python计算KS的实例详解
2020/03/03 Python
python tkinter之顶层菜单、弹出菜单实例
2020/03/04 Python
Python IDLE或shell中切换路径的操作
2020/03/09 Python
Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解
2020/03/30 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
学术会议欢迎词
2014/01/09 职场文书
公务员中国梦演讲稿
2014/08/19 职场文书
房产协议书范本2014
2014/09/30 职场文书
时尚女魔头观后感
2015/06/04 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
销售口号霸气押韵
2015/12/24 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android
Python保存并浏览用户的历史记录
2022/04/29 Python