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实现页面打印的三种方法
Mar 05 Javascript
判断多个input type=file是否有已经选择好文件的代码
May 23 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
Apr 18 Javascript
JavaScript:Div层拖动效果实例代码
Aug 06 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 Javascript
vue-cli的webpack模板项目配置文件分析
Apr 01 Javascript
微信小程序 地图map实例详解
Jun 07 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 Javascript
seajs模块压缩问题与解决方法实例分析
Oct 10 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
vue项目实现减少app.js和vender.js的体积操作
Nov 12 Javascript
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
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
laravel中的一些简单实用功能
2018/11/03 PHP
js arguments.callee的应用代码
2009/05/07 Javascript
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
2016/03/18 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
js Canvas实现的日历时钟案例分享
2016/12/25 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
2018/05/12 Javascript
vue配置font-awesome5的方法步骤
2019/01/27 Javascript
微信小程序制作扭蛋机代码实例
2019/09/24 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
Python中文件操作简明介绍
2015/04/13 Python
python复制列表时[:]和[::]之间有什么区别
2018/10/16 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
详解python websocket获取实时数据的几种常见链接方式
2019/07/01 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
Python descriptor(描述符)的实现
2020/11/15 Python
英国床垫在线:Mattress Online
2016/12/07 全球购物
美国女士泳装店:Swimsuits For All
2017/03/02 全球购物
eDreams加拿大:廉价航班、酒店和度假
2019/03/29 全球购物
判断单链表中是否存在环
2012/07/16 面试题
办公室前台岗位职责范本
2013/12/10 职场文书
中年人生感言
2014/02/04 职场文书
人事专员职责
2014/02/22 职场文书
建筑安全员岗位职责
2014/03/13 职场文书
大学生应聘导游自荐信
2014/06/02 职场文书
群众路线教育实践活动自我剖析思想汇报
2014/10/04 职场文书
群众路线自查自纠工作情况报告
2014/10/28 职场文书
企业承诺书格式范文
2015/04/28 职场文书
2015年财务经理工作总结
2015/05/13 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python
Python创建SQL数据库流程逐步讲解
2022/09/23 Python