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 相关文章推荐
用htc组件制作windows选项卡
Jan 13 Javascript
多种方法实现load加载完成后把图片一次性显示出来
Feb 19 Javascript
JS判断客户端是手机还是PC的2个代码
Apr 12 Javascript
jquery easyui使用心得
Jul 07 Javascript
使用js画图之画切线
Jan 12 Javascript
利用JavaScript实现拖拽改变元素大小
Dec 14 Javascript
jQuery控制元素隐藏和显示
Mar 03 Javascript
vue-i18n结合Element-ui的配置方法
May 20 Javascript
详解nvm管理多版本node踩坑
Jul 26 Javascript
layui实现数据表格隐藏列的示例
Oct 25 Javascript
js验证账户名是否重复
May 26 Javascript
jquery实现拖拽添加元素功能
Dec 01 jQuery
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新建文件自动编号的思路与实现
2011/06/27 PHP
php获取apk包信息的方法
2014/08/15 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
yii2中dropDownList实现二级和三级联动写法
2017/04/26 PHP
Laravel关联模型中过滤结果为空的结果集(has和with区别)
2018/10/18 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
javascript dom 操作详解 js加强
2009/07/13 Javascript
javascript 流畅动画实现原理
2009/09/08 Javascript
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
JS中的prototype与面向对象的实例讲解
2013/05/22 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
jQuery/CSS3图片特效插件整理推荐
2014/12/07 Javascript
Javascript监视变量变化的方法
2015/06/09 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
Bootstrap项目实战之子栏目资讯内容
2016/04/25 Javascript
jQuery仿京东商城楼梯式导航定位菜单
2016/07/25 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
vue 调用 RESTful风格接口操作
2020/08/11 Javascript
Python实现将Excel转换成为image的方法
2018/10/23 Python
余弦相似性计算及python代码实现过程解析
2019/09/18 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
2013/01/09 HTML / CSS
亚马逊巴西站:Amazon.com.br
2019/09/22 全球购物
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
恶意软件的定义
2014/11/12 面试题
服装销售人员求职自我评价
2013/09/26 职场文书
音乐器材管理制度
2014/01/31 职场文书
安全生产承诺书
2014/03/26 职场文书
晚会开场白和结束语
2015/05/29 职场文书
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python