玩转前端 Web：主流跨域方式，全攻略！

2024-01-05 00:04:55

正文

在当今互联网时代，前端开发已成为一项热门且重要的技术。作为前端开发者，我们经常会遇到跨域请求的问题。跨域请求是指从一个域名的网页向另一个域名的服务器发出请求。由于安全策略的限制，同源策略（Same-Origin Policy）不允许这样的请求。因此，我们需要了解并掌握主流的跨域解决方案，以便应对各种跨域场景。

1. CORS（跨域资源共享）

CORS（Cross-Origin Resource Sharing）是一种 W3C 标准，它允许浏览器向跨域服务器发出请求。CORS 通过在 HTTP 请求头中添加一些额外的字段来实现跨域请求。这些字段包括：

Origin：指定请求的来源。
Access-Control-Request-Method：指定请求的方法。
Access-Control-Request-Headers：指定请求的头部。
Access-Control-Allow-Origin：指定允许跨域请求的域名。
Access-Control-Allow-Methods：指定允许跨域请求的方法。
Access-Control-Allow-Headers：指定允许跨域请求的头部。

CORS 是目前最常用的跨域解决方案，它具有较好的兼容性，但对于某些特殊场景可能存在一些局限性。

2. JSONP（JSONP）

JSONP（JSON with Padding）是一种利用 <script> 标签的跨域解决方案。其原理是在页面中动态创建一个 <script> 标签，并指定要请求的 URL 和回调函数。当服务器收到请求后，会将数据包装成 JSONP 格式返回，然后调用回调函数。

<script src="https://example.com/api/data.jsonp?callback=myCallback"></script>

function myCallback(data) {
  // 使用 data
}

JSONP 的优点是简单易用，兼容性好，但它只能用于 GET 请求，且存在安全隐患。

3. WebSocket

WebSocket 是一种双向通信协议，它允许浏览器与服务器建立一个持续的连接。WebSocket 使用 WebSocket API 实现，它提供了更低延迟、更快的响应和更好的可扩展性。

const socket = new WebSocket('ws://example.com/api/data');

socket.onopen = function() {
  // WebSocket 已连接
};

socket.onmessage = function(event) {
  // 收到数据
};

socket.onclose = function() {
  // WebSocket 已关闭
};