面试题：JavaScript 中如何实现跨域数据交互

Question

在 JavaScript Web 编程里，由于同源策略限制，存在跨域问题。请阐述几种常见的跨域数据交互方式，并简单说明原理，例如 JSONP、CORS 等。

Answer 1

JSONP

1. 原理：利用 <script> 标签没有跨域限制的特性。通过动态创建 <script> 标签，其 src 属性指向跨域的接口，并在接口返回的数据中包裹一个本地定义好的函数调用（回调函数）。例如，页面定义了 handleData 函数，请求接口 http://example.com/api?callback=handleData，接口返回 handleData({data: '...'})，这样就实现了跨域获取数据并执行回调函数处理数据。
2. 缺点：仅支持 GET 请求，安全性较低，容易遭受 XSS 攻击。

CORS（跨域资源共享）

1. 原理：是一种基于 HTTP 头的机制，通过服务器增加一些 HTTP 响应头来告诉浏览器，允许哪些源访问该资源。浏览器在请求时，如果是跨域请求，会先根据同源策略检查，若发现跨域，会先发送一个预检请求（OPTIONS 方法），询问服务器是否允许该跨域请求。服务器通过响应头 Access-Control-Allow-Origin 等字段告知浏览器是否允许。如果允许，后续的实际请求才会正常发送。
2. 优点：支持多种请求方法（GET、POST 等），相对安全，是现代浏览器普遍支持的跨域解决方案。

代理服务器

1. 原理：在同源的服务器上搭建一个代理，客户端向代理服务器发送请求，代理服务器再向目标跨域服务器转发请求，并将获取到的响应结果返回给客户端。因为代理服务器与客户端同源，所以客户端可以正常获取数据。例如，客户端向 http://localhost:3000/proxy 发送请求，代理服务器将请求转发到 http://example.com/api，获取数据后返回给客户端。
2. 优点：安全性较高，可对请求和响应进行中间处理。缺点是增加了服务器部署和维护成本。

WebSocket

1. 原理：WebSocket 协议不受同源策略限制，它通过 ws:// 或 wss:// 协议与服务器建立全双工通信连接。客户端和服务器可以在该连接上自由地发送和接收数据，实现跨域实时通信。例如，客户端使用 new WebSocket('ws://example.com/socket') 连接到服务器，然后通过 socket.send(data) 发送数据，通过 socket.onmessage = function(event) {... } 接收数据。
2. 优点：适合实时通信场景，双向通信，性能好。缺点是协议与 HTTP 不同，需要专门的服务器支持。