CORS 简介：通过实际示例理解基础知识

2025-06-08

CORS 简介：通过实际示例理解基础知识

在 Web 开发领域，CORS（跨域资源共享）是开发人员必须理解的重要概念，以确保不同域之间安全高效的数据交换。本指南将带您了解 CORS 的复杂性，解释其用途和工作原理，并提供实际示例来巩固您的理解。

请订阅我的YouTube 频道以支持我的频道并获取更多 Web 开发教程。

什么是 CORS？

CORS 是由 Web 浏览器实现的一项安全功能，用于控制网页如何从服务于该网页的域名以外的其他域名请求资源。这对于防止恶意网站访问其他网站的敏感数据至关重要。

为什么 CORS 很重要？

CORS 允许服务器指定哪些用户可以访问其资源以及如何访问。如果没有 CORS，网站将无法与不同域名上的 API 或资源进行交互，从而严重限制现代 Web 应用程序的功能。

CORS 的工作原理

当网页向其他域名发出请求（跨域请求）时，浏览器会发送一个带有Origin标头的 HTTP 请求。然后，服务器会响应特定的 CORS 标头，以指示该请求是否被允许。以下是涉及的主要标头：

  • Access-Control-Allow-Origin：指定允许哪些来源访问该资源。
  • Access-Control-Allow-Methods：指示资源允许的 HTTP 方法。
  • Access-Control-Allow-Headers：列出实际请求期间可以使用的标头。

简单请求与预检请求

简单请求

简单请求是指满足特定条件的请求，例如使用 GET、POST 或 HEAD 方法之一，且不包含自定义标头。对于这些请求，服务器会直接使用相应的 CORS 标头进行响应。

预检请求

对于更复杂的请求（例如，使用 GET/POST 以外的方法或包含自定义标头的请求），浏览器首先会OPTIONS向服务器发送一个请求。这称为预检请求，它会检查实际请求是否可以安全发送。

示例：在 Node.js Express 服务器中设置 CORS

让我们通过一个示例来了解 CORS 在 Node.js Express 服务器中的实现方式。

步骤 1：设置您的 Node.js 项目

首先，创建一个新的 Node.js 项目并安装必要的依赖项：

mkdir cors-example
cd cors-example
npm init -y
npm install express cors
Enter fullscreen mode Exit fullscreen mode

第 2 步：创建服务器

创建一个名为的新文件server.js并添加以下代码：

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

// Enable CORS for all routes
app.use(cors());

app.get('/data', (req, res) => {
  res.json({ message: 'Hello, CORS!' });
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});
Enter fullscreen mode Exit fullscreen mode

在此示例中，我们使用cors中间件为所有路由启用 CORS。这允许任何域访问该/data端点。

步骤3：测试CORS配置

要测试 CORS 配置，请创建一个index.html包含以下内容的 HTML 文件 ( )：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CORS Test</title>
</head>
<body>
  <h1>Testing CORS</h1>
  <button id="fetchData">Fetch Data</button>
  <div id="result"></div>

  <script>
    document.getElementById('fetchData').addEventListener('click', () => {
      fetch('http://localhost:3000/data')
        .then(response => response.json())
        .then(data => {
          document.getElementById('result').textContent = data.message;
        })
        .catch(error => {
          console.error('Error:', error);
        });
    });
  </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

在浏览器中打开index.html并点击“获取数据”按钮。你应该会看到页面上显示“Hello, CORS!”消息。

进一步阅读

为了更全面地了解 CORS，包括高级主题和实际示例，请查看我们的后续博客文章：高级 CORS：深入了解跨域资源共享。

结论

理解和配置 CORS 对于现代 Web 开发至关重要。通过设置适当的 CORS 标头，您可以控制资源的访问方式，从而确保安全性和功能性。本指南提供了对 CORS 的基础知识，并通过一个实际示例帮助您入门。

开始你的 JavaScript 之旅

如果您是 JavaScript 新手或想要复习一下，请访问我的 BuyMeACoffee 博客来了解基础知识。

👉 JavaScript 简介：编程的第一步

支持我的工作

如果您喜欢我的内容并想支持我的工作，不妨请我喝杯咖啡！您的支持将帮助我继续为开发者社区创作有价值的内容。

系列索引

部分 标题 关联
1 编写干净代码的十大 JavaScript 最佳实践 读
2 面向所有开发人员的 20 大 JavaScript 技巧和提示 读
3 你需要了解的 8 个令人兴奋的 JavaScript 新概念 读
4 JavaScript 应用程序状态管理的 7 大技巧 读
5 🔒 Node.js 安全最佳实践 读
6 优化 Angular 性能的 10 个最佳实践 读
7 十大 React 性能优化技术 读
8 提升你的作品集的 15 个最佳 JavaScript 项目 读
9 掌握 Node.js 的 6 个存储库 读
10 掌握 Next.js 的 6 个最佳存储库 读
11 用于构建交互式 UI 的 5 大 JavaScript 库 读
12 每个开发人员都应该知道的 3 大 JavaScript 概念 读
十三 20 种提升 Node.js 性能的方法 读
14 使用压缩中间件提升 Node.js 应用性能 读
15 理解 Dijkstra 算法：分步指南 读
16 了解 NPM 和 NVM：Node.js 开发的基本工具 读

关注并订阅：

鏂囩珷鏉ユ簮锛�https://dev.to/dipakahirav/mastering-cors-the-definitive-guide-with-practical-examples-eml
Devto 翻译
PREV
你未充分利用的 5 大 JavaScript 功能
NEXT
创建精彩的 GitHub 个人资料 README 最近活动