为了账号安全,请及时绑定邮箱和手机立即绑定

前端跨域常见问题以及解决方案

标签:
JavaScript
首先,我们来先了解一下什么是跨域:

浏览器对于JavaScript的同源策略的限制,例如 a.com 下面的js不能调用 b.com 中的js,对象货数据,因为 a.com 和 b.com 是不同域,所以就有了跨域的出现
那什么才是同域呢?这里简单解释一下 同域就是相同域名,端口相同,协议相同

同源策略

说到跨域,我们不得不了解一下什么是同源策略:
请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同,这就是同源策略的保护,如果浏览器对JavaScript没有同源策略的保护,那么一些重要的机密网站将会很危险,具体怎么才是同源,我这里列出来一个表格:

形式结果
同一域名,不同文件夹成功
同以域名,同一文件夹成功
不同域名,文件夹相同失败
同一域名,不同端口号失败
同一域名,不同的协议失败

下面,我给大家介绍一下解决跨域的几种常见方案:

jsonp

通常未来减轻web服务器的负载,我们把js、css、img等静态资源分离到另一条独立域名的服务器上,在html页面中在通过相应的标签从不同的域名下加载静态资源,而被浏览器运行,基于此原理,我们可以通过动态创建script标签,在请求一个带参数的网址实现跨域通信,是目前比较常见的跨域方式
ps:jsonp解决跨域最大缺点就是只能实现get一种请求

跨域资源共享(CORS)

CORS(Cross-Origin Resource Sharing) 跨域资源共享,定义了必须在访问跨域资源时,浏览器和服务器应该如何沟通,CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或是响应是应该成功还是失败

xhr.open('post','http://www.aizhoujin.top/u/cors',true)
xhr.setRquestHeader('Content-Type','application/x-www-from-urlencoded')
xhr.send()

服务器对于 CORS 的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,就可以允许Ajax进行跨域访问

document.domin + iframe 跨域

此方案仅限主域相同,子域不同的跨域应用场景
实现原理:两个页面都通过js强制设置document.domin为基础主域,就实现了同域

postMessage跨域

postMessage() 是HTML5新定义的通信机制,所以主流浏览器都已实现,该API定义在window对象

otherWindow.postMessage(message,targetOrigin)

message: 要传递的消息
targetOrigin: 指定目标窗口的源,在发送消息的时候,如果目标窗口的协议,主机地址或端口着三者的任意一项不匹配targetOrigin提供的值,那么消息就不会被发送,只要三者完全匹配,消息才会触发
当源匹配时,调用 postMessage() 方法时,目标窗口的window对象会触发一个 message 事件,在进行监听事件时,应先判断origin属性,忽略来自未知源的消息



作者:周瑾ruiqi
链接:https://www.jianshu.com/p/6d4f3f83ac3b


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消