理解 CORS：JavaScript 中的安全跨域资源共享

CORS（跨域资源共享）

**CORS（跨域资源共享）** 是 Web 浏览器实现的一项安全功能，用于控制如何从资源来源域以外的其他域（来源）请求资源。它在现代 Web 开发中至关重要，尤其是在使用 API 时，因为它可以防止未经授权的资源访问并确保数据的安全交换。

1. 什么是起源？

**起源**由以下项组合定义：

协议：（例如 http、https）

域名：（例如 example.com）

端口：（例如：80、：443）

**例子：**

https://example.com 和 http://example.com 是不同的来源。

https://example.com:3000 和 https://example.com:4000 也是不同的来源。

2. 同源策略（SOP）

同源策略是一种安全措施，它限制网页上的资源如何与来自其他来源的资源交互。

示例：从 https://example.com 加载的脚本在没有明确许可的情况下无法从 https://api.otherdomain.com 获取数据。

虽然 SOP 可以确保安全，但它限制了合法的跨源请求，这就是 **CORS** 的用武之地。

3.什么是CORS？

CORS 是一种机制，允许服务器通过在其响应中包含特定的 HTTP 标头来指定谁可以访问其资源。这些标头指示浏览器是否应允许客户端访问所请求的资源。

4. CORS 的工作原理

当浏览器发出跨源请求时，它会检查服务器的响应标头以确定该请求是否被允许。

**关键步骤：**

预检请求（可选）：对于某些类型的请求，浏览器会发送初始 OPTIONS 请求以检查实际请求是否被允许。

服务器响应：服务器在响应中包含适当的 CORS 标头。

浏览器决策：如果标头符合浏览器的期望，则共享资源；否则，浏览器将阻止请求。

5. 重要的 CORS 标头

请求标头：

来源：指定请求的来源。示例：来源：https://example.com

响应标头：

Access-Control-Allow-Origin：指定允许哪些来源访问资源。示例：Access-Control-Allow-Origin：https://example.com

Access-Control-Allow-Methods：指定允许的 HTTP 方法。示例：Access-Control-Allow-Methods：GET、POST、PUT

Access-Control-Allow-Headers：指定可以在请求中发送的自定义标头。示例：Access-Control-Allow-Headers：Content-Type、Authorization

Access-Control-Allow-Credentials：指示是否可以发送凭据（cookie、HTTP 身份验证）。示例：Access-Control-Allow-Credentials：true

6. CORS 请求的类型

简单请求：这些是直接的请求（例如，GET，POST），没有自定义标头，也没有预检。

预检请求：对于具有自定义标头、凭证或 GET 或 POST 以外的方法的请求，浏览器会发送预检 OPTIONS 请求以确保服务器允许它。

凭证请求：包含 Cookie 等凭证的请求需要 Access-Control-Allow-Credentials 标头。

7.示例：CORS 的实际应用

客户端 JavaScript：

fetch("https://api.otherdomain.com/data", {
  method: "GET",
  headers: {
    "Content-Type": "application/json",
  },
  credentials: "include", // For sending cookies or credentials
})
  .then(response => response.json())
  .then(data => console.log("Data:", data))
  .catch(error => console.error("Error:", error));

服务器响应标头：

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true

8. 在服务器端代码中处理 CORS

使用 Express 的 Node.js 示例：

const express = require("express");
const cors = require("cors");
const app = express();

// Use the CORS middleware
app.use(cors({
  origin: "https://example.com", // Allow only this origin
  methods: ["GET", "POST"], // Allow these HTTP methods
  credentials: true, // Allow credentials
}));

app.get("/data", (req, res) => {
  res.json({ message: "CORS request successful" });
});

app.listen(3000, () => console.log("Server running on port 3000"));

9. 常见的 CORS 问题及修复

错误：请求的资源上没有“Access-Control-Allow-Origin”标头。修复：确保服务器包含 Access-Control-Allow-Origin 标头。

错误：凭证请求要求“Access-Control-Allow-Credentials”为真。修复：将 Access-Control-Allow-Credentials 设置为真，并确保 Access-Control-Allow-Origin 不是 *。

预检请求失败：修复：确保服务器正确响应具有所需 CORS 标头的 OPTIONS 请求。

10.CORS 的优点

通过允许受控资源共享来增强安全性。

促进不同领域之间的 API 集成。

支持多种配置以满足应用需求。

11. CORS 的局限性

需要动态来源的 API 的配置复杂性。

增加了某些 API 的预检请求的开销。

由于浏览器强制要求，错误通常很难调试。

12. 结论

CORS 是 Web 应用程序中实现安全、实用的跨源资源共享的重要功能。通过了解服务器上的 CORS 标头并正确配置，您可以确保域之间的通信顺畅且安全，同时遵守 Web 安全标准。

CLIS.CC