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之水平横向滚动歌词同步的应用
May 07 Javascript
js form action动态修改方法
Nov 04 Javascript
jQuery oLoader实现的加载图片和页面效果
Mar 14 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
Apr 06 Javascript
解决npm管理员身份install时出现权限的问题
Mar 16 Javascript
Vue cli构建及项目打包以及出现的问题解决
Aug 27 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
Apr 30 Javascript
layUI实现三级导航菜单效果
Jul 26 Javascript
JS多个异步请求 按顺序执行next实现解析
Sep 16 Javascript
JS快速实现简单计算器
Apr 08 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 Javascript
Javascript文本框脚本实现方法解析
Oct 30 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
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
js检查是否关闭浏览器的方法
2016/08/02 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
2017/07/31 Javascript
Node.js简单入门前传
2017/08/21 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
JS实现获取数组中最大值或最小值功能示例
2019/03/02 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
jquery实现图片放大镜效果
2020/12/23 jQuery
在Python中使用成员运算符的示例
2015/05/13 Python
python3使用urllib模块制作网络爬虫
2016/04/08 Python
Python3生成手写体数字方法
2018/01/30 Python
Python利用递归实现文件的复制方法
2018/10/27 Python
Python子类继承父类构造函数详解
2019/02/19 Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
2019/08/12 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
PyCharm Anaconda配置PyQt5开发环境及创建项目的教程详解
2020/03/24 Python
Pytorch上下采样函数--interpolate用法
2020/07/07 Python
python将YUV420P文件转PNG图片格式的两种方法
2021/01/22 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
三好学生自我鉴定
2013/12/17 职场文书
师范毕业生自我鉴定
2014/01/15 职场文书
全民健身日活动方案
2014/01/29 职场文书
应聘教师求职信
2014/07/19 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
出纳年终工作总结2014
2014/12/05 职场文书
浅谈由position属性引申的css进阶讨论
2021/05/25 HTML / CSS