整理前端最全跨域方案,工作面试不用愁(上)

关于前端跨域这个老生长谈的问题,解决方案也是铺天盖地,但大家是否真正从原理上到实践已经完全掌握了呢?小郭今天将总结所有的跨域解决方案,让你在面试中收获满分。

本文将从跨域场景到跨域方案逐一说明,重点突出最常用跨域方案,让你工作开发不用愁。

由于本文涉及篇幅较长,因此分上下集讲述,力争把最全面的跨域问题分享给大家。

概念

广义跨域:一个域下的文档或脚本试图去请求另一个域下的资源,这被称作为广义上跨域。

举例:

  • 资源跳转: A链接、重定向、表单提交
  • 资源嵌入: <link>、

    通过iframe的src属性由外域转向本地域,跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制,但同时它又是安全操作。但操作依然复杂,不推荐使用

    方案五:postMessage跨域

    postMessage是HTML5 XMLHttpRequest Level 2中的API,且是为数不多可以跨域操作的window属性之一,他可以解决这类问题:页面和其打开的新窗口的数据传递;多窗口之间消息传递;页面与嵌套的iframe消息传递。

    使用方法:postMessage(data,origin)方法接受两个参数
    data: html5规范支持任意基本类型或可复制的对象,但部分浏览器只支持字符串,所以传参时最好用JSON.stringify()序列化。
    origin: 协议+主机+端口号,也可以设置为"*",表示可以传递给任意窗口,如果要指定和当前窗口同源的话设置为"/"。

    请求页:http://www.domain1.com/a.html

    <code><iframe>
    /<code>

    接收页:http://www.domain2.com/b.html

    <code>/<code>

    该方法虽然直接通过window属性解决跨域,但其适用场景有限,因此不推荐。

    上集内容到此结束。

    总结一下:本篇主要带大家弄清楚跨域的概念及跨域问题的来源,同时介绍了五种前端跨域问题的解决方案,但以上方案由于不同因素限制,所以均不推荐使用。下集内容将讲述前端最常用的几种跨域解决方案,千万不要错过。

    我是小郭,想了解更多前端知识欢迎关注公众号“一郭鲜”,小郭将带你在前端海洋里驰骋。另外,文章也将同步更新到公众号,谢谢大家关注。

    "


分享到:


相關文章: