跨域扫盲：从原因到解决方案，一文读懂

前端

2022-11-25 00:51:44

跨域难题的剖析：掌握多种方法轻松解决跨域限制

跨域问题是前端开发人员在构建 Web 应用程序时经常遇到的挑战。那么，什么是跨域？它又是如何产生的呢？

跨域的本质

跨域，顾名思义，是指两个不同来源（域和端口）的网页或应用程序之间的数据传输或通信受限。当浏览器试图从一个域的网站获取资源时，而该资源位于另一个不同域的网站上，就会触发跨域限制。

跨域产生的原因

跨域产生的主要原因是浏览器同源策略（Same-origin policy）的限制。同源策略是一种安全机制，它规定了浏览器只能加载和执行来自同一来源的脚本、样式表和图像等资源，以防止恶意网站窃取敏感数据或执行未经授权的操作。

解决跨域的方法

克服跨域限制有多种方法，每种方法都有其独特的优势和劣势：

1. CORS（跨域资源共享）

CORS（Cross-Origin Resource Sharing）是一种 W3C 规范，它允许不同源的网页或应用程序在一定条件下进行数据传输或通信。CORS 通过预检请求（preflight request）机制，向服务器端发送请求头，询问服务器是否允许跨域访问。如果服务器端允许，则浏览器将发送实际的请求并获取资源。

CORS 示例代码：

// 发送 CORS 预检请求
const preflightRequest = new Request('https://example.com/api/resource', {
  method: 'OPTIONS',
  mode: 'cors',
  headers: {
    'Origin': 'https://client.com',
    'Access-Control-Request-Method': 'GET',
  },
});

fetch(preflightRequest).then(response => {
  // 预检成功，发送实际请求
  const actualRequest = new Request('https://example.com/api/resource', {
    method: 'GET',
    mode: 'cors',
  });

  fetch(actualRequest).then(response => {
    // 获取资源成功
  });
});

2. JSONP（JSON with Padding）

JSONP 是一种解决跨域问题的技巧，它利用了 <script> 标签的跨域特性。JSONP 的工作原理是，客户端向服务器发送请求，要求服务器返回一个包含 JSON 数据的 JavaScript 函数。服务器端收到请求后，将数据包装成一个 JavaScript 函数，并在 HTML 页面中输出。客户端的 <script> 标签加载并执行这个函数，从而获取数据。

JSONP 示例代码：

// 创建一个 `<script>` 标签
const script = document.createElement('script');

// 设置回调函数
window.callback = function(data) {
  // 处理 JSONP 数据
};

// 设置请求 URL
script.src = `https://example.com/api/resource?callback=callback`;

// 将 `<script>` 标签添加到文档中
document.body.appendChild(script);

3. Proxy（代理服务器）

代理服务器是一种充当中介的角色，它可以帮助客户端绕过跨域限制。客户端向代理服务器发送请求，代理服务器再向目标服务器发送请求并返回结果给客户端。这样，客户端就可以通过代理服务器获取到跨域资源。

Proxy 示例代码：

// 创建一个代理对象
const proxy = new Proxy(target, {
  get: function(target, property) {
    // 将请求转发到代理服务器
    const response = fetch(`https://example.com/api/resource?${property}`);

    // 返回代理服务器的响应
    return response;
  },
});

// 使用代理对象获取资源
const data = await proxy.resource;

4. WebSocket

WebSocket 是一种双向通信协议，它允许客户端和服务器之间建立持久连接，从而实现实时的双向数据传输。WebSocket 不受跨域限制，客户端可以与不同源的服务器建立连接并进行通信。

WebSocket 示例代码：

// 创建一个 WebSocket 连接
const websocket = new WebSocket('wss://example.com/api/resource');

// 处理 WebSocket 消息
websocket.onmessage = function(event) {
  // 接收服务器发送的消息
  console.log(event.data);
};

5. Cookie

Cookie 是一种存储在客户端浏览器上的小型文本文件，它可以用于在不同页面或网站之间传递数据。通过设置合适的 Cookie，可以实现跨域数据共享。

Cookie 示例代码：

// 设置跨域 Cookie
document.cookie = `domain=example.com;path=/;secure;HttpOnly`;

// 读取跨域 Cookie
const domain = document.cookie.split(';').find(cookie => cookie.startsWith('domain='));

6. 浏览器插件

还有一些浏览器插件可以帮助解决跨域问题，例如，Chrome 的 CORS Everywhere 插件、Firefox 的 CORS Toggle 插件等。这些插件可以修改浏览器的跨域限制，允许客户端跨域访问资源。

常见问题解答