小編精選 - 技術文章翻譯 · 08月06日

CORS 簡介：透過實際範例了解基礎知識

在Web開發領域， CORS（跨來源資源共享）是開發人員必須理解的基本概念，以確保不同領域之間安全且有效率的資料交換。本指南將帶您了解 CORS 的複雜性，解釋其目的、工作原理，並提供實際範例來鞏固您的理解。

請訂閱我的 [YouTube 頻道](https://www.youtube.com/@DevDivewithDipak?sub\_confirmation=1

）來支援我的頻道並獲取更多 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

讓我們透過一個範例來了解如何在 Node.js Express 伺服器中實作 CORS。

第 1 步：設定您的 Node.js 專案

首先，建立一個新的 Node.js 專案並安裝必要的依賴項：

mkdir cors-example
cd cors-example
npm init -y
npm install express cors

第 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}`);
});

在此範例中，我們使用cors中間件為所有路由啟用 CORS。這允許任何網域存取/data端點。

步驟 3：測試 CORS 配置

若要測試 CORS 配置，請建立一個包含下列內容的 HTML 檔案 ( index.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>

在瀏覽器中開啟index.html ，然後按一下「取得資料」按鈕。您應該會看到訊息“Hello, CORS!”顯示在頁面上。