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 相关文章推荐
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 Javascript
探寻Javascript执行效率问题
Nov 12 Javascript
Javascript核心读书有感之语言核心
Feb 01 Javascript
jquery模拟进度条实现方法
Aug 03 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
Jul 14 Javascript
JS动态加载脚本并执行回调操作
Aug 24 Javascript
Vue.js实现无限加载与分页功能开发
Nov 03 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
Jun 19 Javascript
ztree简介_动力节点Java学院整理
Jul 19 Javascript
从零开始封装自己的自定义Vue组件
Oct 09 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
Oct 20 Javascript
微信小程序rich-text富文本用法实例分析
May 20 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笔记之:日期函数的使用介绍
2013/04/24 PHP
PHP、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
分享常见的几种页面静态化的方法
2015/01/08 PHP
WordPress中用于获取搜索表单的PHP函数使用解析
2016/01/05 PHP
在php中设置session用memcache来存储的方法总结
2016/01/14 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
JS鼠标事件大全 推荐收藏
2011/11/01 Javascript
JS定时关闭窗口的实例
2013/05/22 Javascript
js 判断上传文件大小及格式代码
2013/11/13 Javascript
JavaSript中变量的作用域闭包的深入理解
2014/05/12 Javascript
JS根据生日算年龄的方法
2015/05/05 Javascript
BootStrap table使用方法分析
2016/11/08 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
深入浅出理解JavaScript高级定时器原理与用法
2018/08/02 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
2019/08/23 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
学习 Vue.js 遇到的那些坑
2021/02/02 Vue.js
python实现进程间通信简单实例
2014/07/23 Python
python实现TCP服务器端与客户端的方法详解
2015/04/30 Python
Python使用pickle模块储存对象操作示例
2018/08/15 Python
Python学习笔记之列表推导式实例分析
2019/08/13 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
H&M旗下高端女装品牌:& Other Stories
2018/05/07 全球购物
关于.NET, HTML的五个问题
2012/08/29 面试题
旅游网创业计划书
2014/01/31 职场文书
中国梦团日活动总结
2014/07/07 职场文书
企业员工集体活动方案
2014/08/17 职场文书
乡镇民主生活会发言材料
2014/10/20 职场文书
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android
Redis分布式锁的7种实现
2022/04/01 Redis
Python OpenCV实现图形检测示例详解
2022/04/08 Python