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 相关文章推荐
初探jquery——表单应用范例
Feb 20 Javascript
JavaScript中的History历史对象
Jan 16 Javascript
避免 showModalDialog 弹出新窗体的原因分析
May 31 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
javascript中Number对象的toString()方法分析
Dec 20 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
May 13 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 Javascript
对称加密与非对称加密优缺点详解
Feb 06 Javascript
Node.js数据库操作之查询MySQL数据库(二)
Mar 04 Javascript
详解基于Vue+Koa的pm2配置
Oct 24 Javascript
JavaScript语法约定和程序调试原理解析
Nov 03 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
我的论坛源代码(六)
2006/10/09 PHP
19个超实用的PHP代码片段
2014/03/14 PHP
PHP实现加密的几种方式介绍
2015/02/22 PHP
Laravel 集成 Geetest验证码的方法
2018/05/14 PHP
使用EXT实现无刷新动态调用股票信息
2008/11/01 Javascript
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
jquery struts 验证唯一标识(公用方法)
2013/03/27 Javascript
JS判断两个时间大小的示例代码
2014/01/28 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
2016/02/23 Javascript
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
2019/09/30 Javascript
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
Python 基础教程之包和类的用法
2017/02/23 Python
Python中关于Sequence切片的下标问题详解
2017/06/15 Python
python编写弹球游戏的实现代码
2018/03/12 Python
python 日志增量抓取实现方法
2018/04/28 Python
用python爬取租房网站信息的代码
2018/12/14 Python
Python计算一个点到所有点的欧式距离实现方法
2019/07/04 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
酒店总经理岗位职责
2014/03/17 职场文书
产品销售计划书
2014/05/04 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
高考标语大全
2014/06/05 职场文书
校园安全标语
2014/06/07 职场文书
销售目标责任书
2014/07/23 职场文书
工资收入证明
2014/10/07 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书
教师节随笔
2015/08/15 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书