跨域资源共享的奥秘：用 CORS 响应头打开大门

前端

2023-08-20 02:52:47

跨域资源共享的福音：了解 CORS 响应头

跨域资源共享（CORS）是一个允许不同域名或协议之间的资源访问的机制。对于现代 Web 开发来说，CORS 至关重要，因为应用程序经常需要从外部来源获取数据或与其他域名的 API 交互。

为了解决跨域限制，浏览器和服务器采用了 CORS 响应头。这些特殊头部允许服务器指定哪些来源可以访问其资源，确保数据安全和隐私。

CORS 响应头的运作原理

当浏览器向不同域名的服务器发送请求时，服务器会返回一个 CORS 响应头。这个头部包含有关请求是否被允许的信息。如果允许，浏览器将继续加载资源；否则，浏览器将阻止加载。

CORS 响应头选项

CORS 响应头包含一系列选项，用于控制跨域请求的行为。最常见的选项包括：

Access-Control-Allow-Origin： 指定可以访问资源的来源。
Access-Control-Allow-Methods： 指定允许的 HTTP 方法（例如 GET、POST、PUT、DELETE）。
Access-Control-Allow-Headers： 指定允许的 HTTP 头部（例如 Content-Type、Authorization）。
Access-Control-Max-Age： 指定预检请求的缓存时间。
Access-Control-Expose-Headers： 指定浏览器可以公开的 HTTP 头部。

设置 CORS 响应头

在服务器端，设置 CORS 响应头非常简单。使用以下步骤：

找到要允许跨域访问的资源。
在响应头中添加 CORS 响应头。
设置 CORS 响应头的值以指定允许的来源、HTTP 方法、头部等信息。

示例代码

以下 PHP 代码展示了如何设置 CORS 响应头：

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE");
header("Access-Control-Allow-Headers: Content-Type, Authorization");
header("Access-Control-Max-Age: 3600"); // 缓存时间为 1 小时
?>