前端开发 | 那些年曾谈起的跨域(6)

发布时间：2019-06-21 15:44 所属栏目：21 来源：Aaron

导读：http://localhost:7000/b.html !DOCTYPEHTML html head metacharset=utf-8 title无/title /head body divid=message HelloWorld! /div script window.onload=function(){ varmessageEle=document.getElementById('m

http://localhost:7000/b.html

<!DOCTYPE HTML>  
<html>  
<head>  
<meta charset="utf-8">  
<title>无</title>  
</head>  
<body>  
<div id="message">  
    Hello World!  
</div>  
<script>  
window.onload = function() {  
    var messageEle = document.getElementById('message');  
    window.addEventListener('message', function (e) {  
        if (e.origin !== "http://localhost:6000") {  
            return;  
        }  
        messageEle.innerHTML = "从"+ e.origin +"收到消息： " + e.data;  
    });  
}  
</script>  
</body>  
</html>

这样我们就可以接收任何窗口传递来的消息了，为了安全起见，我们利用这时候的MessageEvent对象判断了一下消息源，MessageEvent对象，这个对象中包含很多东西。

data：顾名思义，是传递来的message
source：发送消息的窗口对象
origin：发送消息窗口的源（协议+主机+端口号）

使用postMessage方法比以上方法用起来要轻便，不必有太多的繁琐操作，可以说postMessage是对于解决跨域来说是一个比较好的解决方案，不会显得代码特别的臃肿，并且各个浏览器又有良好的支持。

跨域资源共享(CORS)

CORS：全称"跨域资源共享"（Cross-origin resource sharing）。CORS需要浏览器和服务器同时支持，才可以实现跨域请求，目前几乎所有浏览器都支持CORS，IE则不能低于IE10。CORS的整个过程都由浏览器自动完成，前端无需做任何设置，跟平时发送ajax请求并无差异。CORS的关键在于服务器，只要服务器实现CORS接口，就可以实现跨域通信。

跨域资源共享(CORS) 是一种机制，它使用额外的HTTP头来告诉浏览器让运行在一个origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域HTTP请求。在上面说过src是不受同源策略限制的，但是出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。例如，XMLHttpRequest和FetchAPI遵循同源策略。这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源，除非响应报文包含了正确CORS响应头。

所有CORS相关的的头都是Access-Control为前缀的。下面是每个头的一些细节。

import express from "express";  
import cors from "cors";  
const app = express()  
const  
var corsOptions = {  
  origin: 'http://example.com',  
  optionsSuccessStatus: 200  
}  
app.get('/products/:id', cors(corsOptions), (req, res, next) => {  
  res.json({msg: 'This is CORS-enabled for only example.com.'})  
})  
app.listen(80, function () {  
  console.log('启用corba,端口:80')  
})

使用CORS简单请求，非常容易，对于前端来说无需做任何配置，与发送普通ajax请求无异。唯一需要注意的是，需要携带cookie信息时，需要将withCredentials设置为true即可。CORS的配置，完全在后端设置，配置起来也比较容易，目前对于大部分浏览器兼容性也比较好，现在应用最多的就是CORS解决跨域了。

WebSocket协议跨域

WebSocket是HTML5新推出的一个API，通过WebSocket可以实现客户端与服务端的即时通信，如聊天室，服务数据同步渲染等等。WebSocket是点对点通信，服务端与客户端可以通过某种标识完成的。WebSocket是不受同源策略限制的所以可以利用这个特性直接与服务端进行点对点通信。

以下示例没有使用HTML5的WebSocket而是使用的socket.io完成类似的功能操作。

若若的说一句：其实我一直以为WebSocket与Ajax一样是受同源策略限制的，经过学习才发现不是的。真是学到老活到老(关谷口音)。O(∩_∩)O

（编辑：ASP站长网）