JavaScript 九种跨域方式实现原理

下面是“JavaScript 九种跨域方式实现原理”的完整攻略。

1. 跨域概述

所谓跨域，即提到网页中使用了访问来源不同的域名。例如，在 www.example.com 中嵌入了来自 api.example.net 的请求。这种情况下就需要通过跨域来完成交互操作。一般来说，跨域请求是被浏览器所禁止的。因此我们需要寻找别的解决方案来满足我们的需求。

2. CORS（跨源资源共享）

CORS 是一种机制，它使用附加的 HTTP 头部来告诉浏览器，让运行在一个源上的 Web 应用程序被准许访问来自不同源的选定的资源。具体情况下可参考MDN文档。

由于之前的同源策略限制，浏览器并不能发送跨域请求。但在服务器端进行配置，即在请求头部信息之中，配置Access-Control-Allow-Origin即可解决。

另外还需要注意，CORS请求默认不会发送cookie和HTTP认证信息到服务器端。如果这些信息也是必须的，那么需要在前端和后端添加如下字段。

Access-Control-Allow-Credentials:true

3. JSONP

在不支持CORS的旧时代，我们可以使用JSONP（JSON with Padding）技术实现跨域。这种技术在发送请求时，利用script标签，发起GET请求，在响应中返回 JavaScript 函数，并将需要传递到客户端的数据作为参数传递到JavaScript函数内部。在客户端，我们创建一个同名的JavaScript函数，从而让返回的函数被调用执行。

具体的实现方式如下：

function jsonp(url, callback) {
    var script = document.createElement('script');
    script.async = true;
    script.src = url + '?callback=' + callback;
    document.getElementsByTagName('head')[0].appendChild(script);
}

其中，url为请求地址，callback为远程服务端返回的回调函数名。具体操作时，可以先在前端定义一个函数，然后以该函数名作为callback的参数名来发送远程请求，最终，在服务器段向前端返回一个同名的带参数的函数，从而实现跨域通信。

4. WebSocket

WebSocket 是HTML5提出的新协议，用于在客户端和服务器之间建立双向通信的连接。与HTTP不同的是，WebSocket是一种持久化的协议，其连接是始终开放的，并且双方可以随时发送数据。

在建立连接时，浏览器发送一个HTTP请求，请求头包括了一些特殊的字段来表示哥伦姆希望升级为WebSocket连接。服务器端进行验证通过后，浏览器和服务器端就可以进行双向通信了。

WebSocket相对于HTTP协议的优势在于，通信会话都是在同一连接之中，它不需要发起 HTTP 请求，因此， 避免了HTTP球的添加延迟。

在实践中，我们可以使用socket.io这个封装库，通过服务器来进行WebSocket连接。

实例1-使用CORS进行跨域

浏览器中的请求头部信息展示如下：

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:4000
Access-Control-Expose-Headers: *
Content-Length: 15
Content-Type: application/json; charset=utf-8
Date: Sat, 05 Sep 2020 11:13:32 GMT
ETag: W/"f-RX6BhjNthz0TgIOCgHWvjrhkgbQ"
X-Powered-By: Express

其中Access-Control-Allow-Origin字段指定了允许跨域访问的源地址，这里设为http://localhost:4000。而前面提到的Access-Control-Allow-Credentials字段则说明允许跨域请求的时候，能够发送HTTP认证信息。实际使用的时候，我们可以在baseUrl上设置withCredentials为true来进行设置。

实例2-使用WebSocket进行跨域

var socket = io('http://localhost:7001', {
        transports: ['websocket'],
    });

在这段代码中可以看到，我们是通过socket.io这个封装库，来进行跨域通信的。其中，io方法的第一个参数是服务器端的地址，第二个参数则是传递的选项信息，其中transports可用于传递连接的设定信息，设定为websocket表示我们将使用WebSocket进行通信。

以上是JavaScript 实现跨域技术的九种方式以及两个示例的具体攻略。希望对你有用。