跨域的总结

实习偶然碰到了一个未接触过的跨域解决方案，写下一篇加强记忆

1.相对熟悉的方案

1.跨域资源共享（CORS）

有过nodejs开发实践的话，对这个很熟悉，处理跨域很方便，只需引入一个第三方库并注册一个全局的中间件cors

并且可以进行一系列的配置

• origin: 设置允许访问资源的域名，可以是单个字符串，也可以是一个数组，或者一个回调函数。如果想允许所有来源，可以设置为 '*'。
• methods: 指定允许的 HTTP 请求方法。
• allowedHeaders: 指定允许的请求头。
• credentials: 设置为 true，表示允许跨域请求时发送 Cookie 等凭证信息。
• preflightContinue: 设置为 true 时，表示在 OPTIONS 预检请求后继续处理请求。

2.服务器配置

通过nginx的配置实现

nginx代理跨域，实质和CORS跨域原理一样，通过配置文件设置请求响应头Access-Control-Allow-Origin...等字段。

3.jsonp

利用<script>标签没有跨域限制，通过<script>标签src属性，发送带有callback参数的GET请求，服务端将接口返回数据拼凑到callback函数中，返回给浏览器，浏览器解析执行，从而前端拿到callback函数返回的数据。

4.proxy代理

只能用作于开发阶段，临时解决本地请求服务器产生的跨域问题，并不适用线上环境

还有很多配置，不一一列举

.umirc.ts

 proxy: {
    "/admin": {
      target: "http://10.69.23.22/",
      changeOrigin: true,
    },
  },

2.一些不常见的

1.document.domain + iframe跨域

限主域相同，子域不同的跨域应用场景。实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域。

这里赘述一些关于iframe相关知识，便于记忆理解：

iframe 是HTML的一个标签，默认存在宽高，存在边界，是一个行内块元素，可以通过display更改。每个iframe里维护一套自己的window对象。只有同域才能进行iframe之间的读改写，跨域时，只能进行简单的路由跳转。

简单来说iframe 标签的作用是：在文档中嵌套文档，或者说在网页中嵌套网页

属性：MDN

iframe的父子之间通信：

1.非跨域通信

父页面获取子页面值和方法

利用ifrmae.contentWindow 获取

跨域通信

2.利用postmessage来进行通信。详见：MDN。

2.location.hash + iframe跨域

  实现原理： a欲与b跨域相互通信，通过中间页c来实现。 三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。
  具体实现：A域：a.html -> B域：b.html -> A域：c.html，a与b不同域只能通过hash值单向通信，b与c也不同域也只能单向通信，但c与a同域，所以c可通过parent.parent访问a页面所有对象。

3.window.name + iframe跨域

  window.name属性的独特之处：name值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。

4.postMessage跨域

postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：

• 页面和其打开的新窗口的数据传递
• 多窗口之间消息传递
• 页面与嵌套的iframe消息传递
• 上面三个场景的跨域数据传递

用法：postMessage(data,origin)方法接受两个参数：

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

5、WebSocket协议跨域

  WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。 原生WebSocket API使用起来不太方便，我们使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。

这里摘自掘金的一篇文章，希望自己能对跨域解决方案有一个相对完整的理解

再碰到相应问题时候有一定思路
原文链接详情（内有代码示例）：9种常见的前端跨域解决方案（详解）

作者：小铭子