解决跨域问题的多种方案

跨域问题是 Web 开发中常见且重要的议题，它源于浏览器的安全策略——同源策略(Same-Origin Policy)，它规定了浏览器在执行脚本或加载资源时必须遵守的原则：只有当协议、域名和端口完全相同时，才被认为是同源的，可以互相访问资源。旨在防止恶意网站通过脚本读取或篡改来自不同源的敏感信息。然而，在实际开发过程中，跨域限制常常阻碍了不同域间的正常通信。本文将详细介绍并探讨解决跨域问题的各种方案。

1. JSONP

JSON with Padding，原理是利用 <script> 标签不受同源策略限制的特点，通过动态创建 script 标签，请求一个跨域服务器上的资源，在请求地址中添加一个回调函数名，服务端在返回数据时会将数据作为参数传入该回调函数中，并返回给客户端。客户端则可以通过定义这个回调函数来处理返回的数据。

function jsonp(url, callback) {
  const script = document.createElement("script");

  script.src = `${url}&callback=${callback}`;
  document.body.appendChild(script);

  window[callback] = function (data) {
    document.body.removeChild(script);
    delete window[callback];
    callback(data);
  };
}

jsonp("http://baidu.com/jsonp", function (data) {
  //处理返回的data
});

使用场景：

一种非标准的方法，适用于 GET 请求。
适用于数据量较小、不需要特别保密的场景。

优缺点：

优点：实现简单、支持跨域请求。
缺点：只能处理 JSON 数据、无法处理错误信息、存在安全风险。

2. CORS

Cross-Origin Resource Sharing，"跨域资源共享"，是一个 W3C 标准，它定义了一套机制，允许服务器声明哪些源（域）有权访问其资源，以及客户端和服务器之间应该如何协商和验证这一访问权限。服务器通过在响应头中设置 Access-Control-Allow-Origin 等字段来授权跨域请求。

2.1 预检请求

对于非简单请求（如非 GET/POST 方法的请求，或者使用了自定义 HTTP 头），浏览器会先发送一个 OPTIONS 预检请求，得到服务器许可后再发送实际请求。预检请求会携带以下头信息：

Origin：发送请求的源地址。
Access-Control-Request-Method：打算使用的 HTTP 方法。
Access-Control-Request-Headers（可选）：打算使用的自定义请求头。

2.2 服务器响应预检请求

服务器收到预检请求后，如果同意跨域请求，会在响应头中返回相应的允许信息：

Access-Control-Allow-Origin：明确允许访问的源，可以用通配符*表示允许任何源，但这样做会禁用携带凭据（如 cookie）的请求。
Access-Control-Allow-Methods：允许的 HTTP 方法列表。
Access-Control-Allow-Headers：允许的自定义请求头列表。
Access-Control-Max-Age（可选）：预检请求的结果可以在多长时间内被缓存。
Access-Control-Allow-Credentials（可选）：设置为 true 表示允许携带凭据的请求。

2.3 实际请求和响应

如果预检请求成功，浏览器会继续发送实际的请求。服务器在响应实际请求时，也需要返回合适的 CORS 头信息，尤其是 Access-Control-Allow-Origin。

2.4 简单请求

对于使用 GET、POST、HEAD 方法并且不带自定义头信息的请求，被称为简单请求，浏览器不会发送预检请求，而是直接在请求头中带上 Origin 信息，服务器根据接收到的 Origin 头信息决定是否允许请求。

2.5 实际应用

CORS 需要浏览器和服务器同时支持。当使用 XMLHttpRequest (XHR)、Fetch API 等发起跨域请求时：

客户端：浏览器会自动添加额外的请求头，如Origin，向服务器表明请求的来源，开发者无需手动处理复杂的跨域逻辑。服务端根据这个值判断是否同意这次请求。
服务器：服务端同意请求时，响应头加上 Access-Control-Allow-Origin、Access-Control-Allow-Credentials、access-control-allow-methods 等信息。服务器端设置 CORS 响应头示例：

// Node.js 示例
app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*"); // 允许所有源访问，或指定具体的源
  res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
  res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
  if ("OPTIONS" === req.method) {
    res.sendStatus(204); // 预检请求直接返回204
  } else {
    next();
  }
});

使用场景：

能够支持跨域请求，同时支持多种数据类型。
适用于大部分的场景。

优缺点：

优点：能够支持跨域请求、支持多种数据类型。
缺点：需要服务端配合设置响应头、性能稍低。

3. WebSocket

WebSocket 是一种支持双向通信的网络协议，它在客户端和服务器之间建立持久的连接。WebSocket 不受同源策略的限制，因此可以在不同源的页面之间进行实时数据传输和通信。因为不同源之间可以通信，最好在服务器端对 origin 进行校验，避免通信内容被劫持。

const ws = new WebSocket("ws://example.com/socket");

ws.onopen = function (event) {
  ws.send("Hello from client!");
};

ws.onmessage = function (event) {
  console.log(event.data);
};

使用场景：

适用于聊天室、游戏等实时性较高的场景。

优缺点：

优点：支持实时通信，不受同源策略限制。
缺点：需要服务端配合实现、只能处理文本数据、不稳定。

4. PostMessage

PostMessage 是 HTML5 引入的一种跨文档通信方法，允许不同源的窗口或 iframe 之间安全地传递数据。通过调用 window.postMessage() 方法，目标窗口监听 message 事件，实现数据的传递。

//发送消息
window.postMessage("hello", "http://example.com");

//接收消息
window.addEventListener("message", function (event) {
  if (event.origin === "http://example.com") {
    console.log(event.data);
  }
});

使用场景：

可以进行不同源窗口的数据传递。
适用于嵌套页面、多窗口通信等场景。

优缺点：

优点：可以进行不同源窗口的数据传递，无需担心同源策略的限制。
缺点：需要手动处理消息的发送和接收，使用相对繁琐。

5. 代理服务器

代理服务器是一种常用的跨域解决方案，通过在服务器端设置一个代理来转发请求。客户端向代理服务器发送请求，代理服务器再向目标服务器发送请求，并将结果返回给客户端。

以 nginx 为例：通过配置 nginx 的反向代理，可以实现对目标地址的访问，并将响应返回给客户端。

server {
    listen 80;
    server_name example.com; # 客户端域名

    location / {
        proxy_pass http://backend_server; # 替换为您的后端服务器地址
    }
}

使用场景：

用于解决前端直接访问跨域 API 的问题。
适用于请求量较大、需要保密的场景。

优缺点：

优点：兼容性好，安全性高。
缺点：需要额外设置代理服务器，增加了系统的复杂性。

6. document.domain

通过设置 document.domain 的值，可以实现不同子域名之间的跨域通信。但是该方式只适用于主域名相同、子域名不同的情况下。这种方法主要用于同顶级域名下的 iframe 通信。

// 在 A 页面中设置
document.domain = "example.com";

// 在 B 页面中设置
document.domain = "example.com";

使用场景：

只适用于主域名相同、子域名不同的情况下。
适用于不同子域名之间进行数据传递的场景。

优缺点：

优点：实现简单、不需要浏览器支持。
缺点：只适用于主域名相同、子域名不同的情况下。