了解 CORS：JavaScript 中的安全跨源资源共享-js教程-PHP中文网

Understanding CORS: Secure Cross-Origin Resource Sharing in 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 标头

请求标头：

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

响应标头：

Access-Control-Allow-Origin: 指定允许哪些源访问资源。

示例：Access-Control-Allow-Origin：https://example.com
Access-Control-Allow-Methods: 指定允许的 HTTP 方法。

示例：访问控制允许方法：GET、POST、PUT
Access-Control-Allow-Headers: 指定可以在请求中发送的自定义标头。

示例：访问控制允许标头：内容类型、授权
Access-Control-Allow-Credentials: 指示是否可以发送凭据（cookie、HTTP 身份验证）。

示例：访问控制允许凭据：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”为 true。
- 修复：将 Access-Control-Allow-Credentials 设置为 true 并确保 Access-Control-Allow-Origin 不是 *。
预检请求失败：
- 修复：确保服务器正确响应具有所需 CORS 标头的 OPTIONS 请求。