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 相关文章推荐
纯js实现的论坛常用的运行代码的效果
Jul 15 Javascript
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 Javascript
JavaScript数据结构与算法之栈详解
Mar 12 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
Jun 01 Javascript
12个非常实用的JavaScript小技巧【推荐】
May 18 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
Sep 22 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
详解vue中async-await的使用误区
Dec 05 Javascript
详解vue 组件注册
Nov 20 Vue.js
详解Vue的七种传值方式
Feb 08 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
PHP的FTP学习(四)
2006/10/09 PHP
获取URL文件名后缀
2013/10/24 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
CI框架整合widget(页面格局)的方法
2016/05/17 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
JavaScript获取flash对象与网上的有所不同
2014/04/21 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
2017/02/05 Javascript
vue使用watch 观察路由变化,重新获取内容
2017/03/08 Javascript
基于JS对象创建常用方式及原理分析
2017/06/28 Javascript
Angular网络请求的封装方法
2018/05/22 Javascript
jQuery实现常见的隐藏与展示列表效果示例
2018/06/04 jQuery
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
python中精确输出JSON浮点数的方法
2014/04/18 Python
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
django 创建过滤器的实例详解
2017/08/14 Python
python使用json序列化datetime类型实例解析
2018/02/11 Python
对numpy Array [: ,] 的取值方法详解
2018/07/02 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
python实现一行输入多个值和一行输出多个值的例子
2019/07/16 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
人力资源专员自我评价怎么写
2013/09/19 职场文书
音乐表演专业毕业生求职信
2013/10/14 职场文书
电子信息工程自荐信
2014/05/26 职场文书
计生专干事迹
2014/05/28 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书
Redis读写分离搭建的完整步骤
2021/09/14 Redis