纵横时空，破除前端跨域限制

前端

2023-10-13 13:23:32

跨域问题剖析及解决方案

跨域的本质

在浏览器世界的浩瀚汪洋中，安全至上。为了防止恶意网站窃取敏感数据，诞生了同源策略（Same-Origin Policy）。它规定，只有来自同一源（协议、域名和端口）的请求才能顺利通过浏览器的安全门槛。

跨域的痛点

当网站试图与不同源的服务器通信时，就会遭遇跨域问题。这种限制就像一座无形的墙，阻碍了跨域通信。在现代前端开发中，跨域问题尤其普遍，导致数据无法共享、应用程序无法流畅运作。

破除跨域限制的利器

幸好，聪明的开发者们发明了多种利器来打破跨域的枷锁，其中最常见的包括：

CORS（跨域资源共享）

CORS 是一种标准，允许服务器明确指定哪些来源可以访问其资源。就像颁发通行证一样，服务器通过 HTTP 头信息指示哪些来源可以跨域访问，就像给予它们通行证一样。

代码示例：

// 设置 CORS 头
const response = fetch('https://example.com/api/data', {
  headers: {
    'Access-Control-Allow-Origin': 'https://example.com'
  }
});

JSONP（JSON with Padding）

JSONP 是一种非标准技术，巧妙利用了 <script> 标签的无限制加载特性。它将 JSON 数据包装在一个 JavaScript 函数中，然后作为回调函数执行，从而绕过同源策略。

代码示例：

// 使用 JSONP 获取数据
const script = document.createElement('script');
script.src = 'https://example.com/api/data?callback=myCallback';
document.head.appendChild(script);

// 定义回调函数
window.myCallback = function(data) {
  // 接收并处理 JSON 数据
};

AJAX（Asynchronous JavaScript and XML）

AJAX 使用 XMLHttpRequest 对象实现异步通信。通过设置 withCredentials 属性为 true，它可以启用跨域请求。

代码示例：

// 使用 AJAX 发送跨域请求
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/data');
xhr.withCredentials = true;
xhr.send();

Preflight（预检请求）

Preflight 是一种 CORS 中的关键概念。当浏览器发送跨域请求时，它会先发送一个 Preflight 请求到服务器。服务器接收 Preflight 请求后，返回 Preflight 响应，指示允许的来源、请求方法和响应头。浏览器在收到 Preflight 响应后，如果与实际请求的信息一致，则发送实际请求。

常见问题解答