javascript 跨域问题以及解决办法
更新时间：2017年07月17日 16:23:44 作者：Dear_Mr
这篇文章主要介绍了javascript 跨域问题以及解决办法的相关资料,需要的朋友可以参考下
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 跨域问题以及解决办法的讲解，大家如果 有疑问可以留言讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
相关文章
这篇文章主要为大家详细介绍了JS实现简单tab选项卡切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
在本文中，我不会去谈 React、Angular、Vue 等等这些大的前端框架，也不会谈 Atom、VS code、Sublime 等等这些已经很出名的代码编辑器，我只是想简单的分享一套我认为有助于提升开发者工作流的工具集2017-09-09
遇到网页上有精美图片或者精彩文字想保存时，通常大家都是选中目标后按鼠标右键，在弹出菜单中选择“图片另存为”或“复制”来达到我们的目的。但是，目前有许多网页都屏蔽了鼠标右键，那么用js如何实现禁止鼠标右键的功能呢？下面小编给大家介绍下2016-10-10
这篇文章主要给大家介绍了关于如何使用原生js写一个简单的注册登录页面的相关资料,文中介绍了一个以js验证表单的简洁的注册登录页面,需要的朋友可以参考下2023-06-06
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
这篇文章主要为大家详细介绍了本地Bootstrap文件字体图标引入却无法显示问题的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了TypeScript利用TS封装Axios实战，TypeScript封装一遍Axios，能进一步巩固TypeScript的基础知识，需要的小伙伴可以参考一下2022-06-06
刚刚学习了个js的小技术，还蛮好玩的，以后会把做的一些小例子贴上来，方便自己也可以跟大家一起分享学习成果，哈哈~~2010-02-02
这篇文章主要介绍了js实现类似于add(1)(2)(3)调用方式的方法,需要的朋友可以参考下2015-03-03
bootstrap datepicker插件默认英文修改为中文
这篇文章主要为大家详细介绍了bootstrap datepicker插件默认英文修改为中文的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要为大家介绍下通过firefox的FireBug调试JS，需要的朋友可以参考下2013-12-12
最新评论