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 相关文章推荐
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
编写可维护面向对象的JavaScript代码[翻译]
Feb 12 Javascript
javascript实现文本域写入字符时限定字数
Feb 12 Javascript
jQuery制作拼图小游戏
Jan 12 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
Apr 28 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
Apr 29 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
Sep 23 Javascript
在vue中使用express-mock搭建mock服务的方法
Nov 07 Javascript
如何使用less实现随机下雪动画详解
Jan 02 Javascript
详解vue2.0模拟后台json数据
May 16 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
Nov 20 Javascript
微信小程序实现下滑到底部自动翻页功能
Mar 07 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基础学习笔记
2007/03/18 PHP
jquery+php实现导出datatables插件数据到excel的方法
2015/07/06 PHP
PHP程序中的文件锁、互斥锁、读写锁使用技巧解析
2016/03/21 PHP
thinkPHP简单调用函数与类库的方法
2017/03/15 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
jQuery解决浏览器兼容性问题案例分析
2016/04/15 Javascript
微信小程序中顶部导航栏的实现代码
2017/03/30 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
JS设计模式之状态模式概念与用法分析
2018/02/05 Javascript
Javascript Web Worker使用过程解析
2020/03/16 Javascript
JS加载解析Markdown文档过程详解
2020/05/19 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
2021/01/28 Javascript
深入解析Python中的descriptor描述器的作用及用法
2016/06/27 Python
Python编写登陆接口的方法
2017/07/10 Python
Python实现多属性排序的方法
2018/12/05 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
python3实现斐波那契数列(4种方法)
2019/07/15 Python
对Django外键关系的描述
2019/07/26 Python
浅谈pycharm使用及设置方法
2019/09/09 Python
Python chardet库识别编码原理解析
2020/02/18 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
新西兰最大的在线设计师眼镜店:SmartBuyGlasses新西兰
2017/10/20 全球购物
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
水污染治理专业毕业生推荐信
2013/11/14 职场文书
旅游专业毕业生自荐书
2014/06/30 职场文书
作息时间调整通知
2015/04/22 职场文书
2019年“我为祖国点赞”演讲稿(3篇)
2019/09/26 职场文书
Spring boot应用启动后首次访问很慢的解决方案
2021/06/23 Java/Android
《火纹风花雪月无双》预告“神秘雇佣兵” 紫发剑客
2022/04/13 其他游戏
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS