这是我参与「第五届青训营」笔记创作活动的第10天。

什么是跨域？

跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。

例如：a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。

同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域。

如何解决跨域问题？

jsonp主要是利用了script标签的src属性不受同源策略的影响，通过后端的配合从而解决跨域问题。

CORS：全称cross origin resource share （资源共享）

工作原理：服务器在返回响应报文的时候，在响应头中设置一个允许的header

res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader("Access-Control-Allow-Methods", "GET, PUT, OPTIONS, POST");

同源策略是浏览器的安全策略，不是 HTTP协议的一部分。服务器端调用 HTTP 接口只是使用 HTTP 协议，不会执行 JS 脚本，不需要同源策略，也就不存在跨越问题。

实现思路：通过 nginx 配置一个代理服务器做跳板机，将前端的地址和后端的地址用 nginx 转发到同一个地址下，如 5500 端口和 3000 端口都转到 8080 端口下, 也可以解决跨域问题。

postMessage 是 HTML5 XMLHttpRequest Level2 中的 API，且是为数不多可以跨域操作的 window 属性之一。

解决以下问题：

语法：otherWindow.postMessage(message, targetOrigin, [transfer])

otherWindow：其他窗口的引用* iframe 的 contentWindow 属性* 执行 window.open 返回的窗口对象* 命名过或数值索引的 window.frames
message：要发送到其他 window 的数据
targetOrigin：指定哪些窗口能接收到消息事件，其值可以是 * 或者一个 URI
transfer：可选，一串和 message 同时传递的 Transferable 对象。这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权