跨域：手动实现 CORS 和 JSONP 流程详解

跨域请求：浏览器安全与 CORS

在现代 Web 开发中，跨域请求是一种常见的情况。当您尝试从一个域名的网页向另一个域名的服务器发送请求时，就会发生跨域请求。然而，出于安全考虑，浏览器会默认阻止这些请求。这是因为浏览器需要保护用户免受跨域脚本攻击和其他安全威胁。

为了解决跨域请求的问题，人们开发了两种常用的技术：CORS（跨域资源共享）和 JSONP（JSON with Padding）。CORS 是一个更为现代且推荐的方法，它允许服务器端明确地指定哪些域可以访问其资源。而 JSONP 则是一种更老的方法，它利用 <script> 标签来绕过浏览器的跨域限制。

手动实现 CORS

CORS 是一种相对简单的技术，它需要服务器端和客户端的配合。

1. 服务器端配置

要启用 CORS，您需要在服务器端配置 CORS 头。CORS 头是一组 HTTP 头，它们指示浏览器哪些域可以访问服务器的资源。您可以使用以下代码在服务器端配置 CORS 头：

Access-Control-Allow-Origin: https://www.example.com

这行代码允许来自 https://www.example.com 域的请求访问服务器的资源。您还可以使用通配符 * 来允许来自所有域的请求，但这并不安全，因为它可能会使您的服务器容易受到跨域脚本攻击。

2. 客户端代码

在客户端，您需要使用 CORS API 来发送跨域请求。CORS API 是一个 JavaScript API，它允许您在 JavaScript 代码中配置 CORS 请求。您可以使用以下代码在客户端发送 CORS 请求：

fetch('https://www.example.com/api/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
    'Access-Control-Request-Headers': 'X-Requested-With'
  }
})
.then(response => response.json())
.then(data => console.log(data));

这行代码会向 https://www.example.com/api/data 发起一个 GET 请求。在请求头中，我们指定了 Content-Type 和 Access-Control-Request-Headers 头。Content-Type 头指定了请求体的格式，Access-Control-Request-Headers 头指定了请求中需要包含的 CORS 头。

手动实现 JSONP

JSONP 是CORS出现之前的解决跨域的方法，它是一种更老的方法，它利用 <script> 标签来绕过浏览器的跨域限制。JSONP 的基本原理是将数据作为 JavaScript 函数的参数传递，然后在客户端使用该函数来访问数据。

1. 服务器端代码

在服务器端，您需要创建一个 JSONP 端点。JSONP 端点是一个返回 JavaScript 代码的端点。您可以使用以下代码在服务器端创建一个 JSONP 端点：

function callback(data) {
  console.log(data);
}

这行代码定义了一个名为 callback 的 JavaScript 函数，该函数将在服务器端被调用。

2. 客户端代码

在客户端，您需要使用 <script> 标签来请求 JSONP 端点。您可以使用以下代码在客户端请求 JSONP 端点：

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

这行代码会向 https://www.example.com/api/data 发起一个 GET 请求，并在请求中指定 callback 参数。当服务器收到请求后，它会执行 callback 函数，并将数据作为参数传递给该函数。

结语

CORS 和 JSONP 是两种常用的跨域请求处理技术。CORS 是一种更为现代且推荐的方法，它需要服务器端和客户端的配合。JSONP 则是一种更老的方法，它利用 <script> 标签来绕过浏览器的跨域限制。无论您选择哪种技术，都必须确保正确地配置服务器端和客户端代码，以避免安全问题。