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 相关文章推荐
基于Asp.net与Javascript控制的日期控件
May 22 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
Jul 17 Javascript
网页中CDATA标记的说明
Sep 12 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
May 20 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
Nov 04 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
Jul 07 Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
vue的常用组件操作方法应用分析
Apr 13 Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 Javascript
在vscode 中设置 vue模板内容的方法
Sep 02 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 危险函数解释 分析
2009/04/22 PHP
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法
2015/10/23 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
2011/03/28 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
2013/09/12 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
2013/12/12 Javascript
基于JQuery实现的Select级联
2014/01/27 Javascript
jQuery中选择器的基础使用教程
2016/05/23 Javascript
利用nodeJs anywhere搭建本地服务器环境的方法
2018/05/12 NodeJs
解决Vue动态加载本地图片问题
2019/10/09 Javascript
React.js组件实现拖拽排序组件功能过程解析
2020/04/27 Javascript
JS获取当前时间戳方法解析
2020/08/29 Javascript
vue vant中picker组件的使用
2020/11/03 Javascript
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
Python实现字典的key和values的交换
2015/08/04 Python
深入了解Python数据类型之列表
2016/06/24 Python
python实现kMeans算法
2017/12/21 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
Scrapy框架爬取西刺代理网免费高匿代理的实现代码
2019/02/22 Python
Python常见数字运算操作实例小结
2019/03/22 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
详解Pycharm安装及Django安装配置指南
2020/09/15 Python
Python排序函数的使用方法详解
2020/12/11 Python
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
创业计划书中包含的9个方面
2013/12/26 职场文书
三年级音乐教学反思
2014/01/28 职场文书
《绿色蝈蝈》教学反思
2014/03/02 职场文书
班级团队活动方案
2014/08/14 职场文书
写给同事的离职感言
2015/08/04 职场文书