在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!”顯示在頁面上。
進一步閱讀
若想更全面地了解 CORS，包括進階主題和實際範例，請查看我們的後續部落格文章： 進階 CORS：深入探討跨來源資源共享。
結論
了解和配置 CORS 對於現代 Web 開發至關重要。透過設定適當的 CORS 標頭，您可以控制資源的存取方式，從而確保安全性和功能性。本指南提供了對 CORS 的基本了解和幫助您入門的實際範例。
支持我的工作
如果您喜歡我的內容並想支持我的工作，請考慮為我買杯咖啡！您的支持幫助我繼續為開發者社群創造有價值的內容。
系列索引
|部分|標題 |連結 |
|------|------------------------------------------------ -------------- -----------|------------------------ ---------------- --------|
| 1 |編寫簡潔程式碼的 10 個 JavaScript 最佳實務 | 閱讀|
| 2 |適合每位開發人員的 20 個 JavaScript 技巧與技巧🚀 |閱讀|
| 3 |您需要了解的 8 個令人興奮的新 JavaScript 概念 |閱讀|
| 4 |在 JavaScript 應用程式中管理狀態的 7 個重要技巧 | 閱讀|
| 5 | 🔒 基本 Node.js 安全最佳實務 |閱讀|
| 6 |優化角度效能的 10 個最佳實踐 |閱讀|
| 7 |十大 React 效能優化技術 |閱讀|
| 8 |增強您的投資組合的 15 個最佳 JavaScript 專案 |閱讀|
| 9 |掌握 Node.js 的 6 個儲存庫 |閱讀|
| 10 | 10掌握 Next.js 的 6 個最佳儲存庫 |閱讀|
| 11 | 11用於建立互動式 UI 的 5 個最佳 JavaScript 庫 |閱讀|
| 12 | 12每個開發人員都應該了解的 3 個 JavaScript 概念 |閱讀|
| 13 |大規模提高 Node.js 效能的 20 種方法 |閱讀|
| 14 | 14使用壓縮中間件提升 Node.js 應用程式效能 | 閱讀|
| 15 | 15了解 Dijkstra 演算法：逐步指南 |閱讀|
| 16 | 16了解 NPM 和 NVM：Node.js 開發的基本工具 | 閱讀|
關注並訂閱：
-
Instagram : devdivewithdipak
-
網址：[Dipak Ahirav] (https://www.dipakahirav.com)
-
電子郵件：[email protected]
-
YouTube ：[devDive 與 Dipak](https://www.youtube.com/@DevDivewithDipak?sub\_confirmation=1
）
- 領英：迪帕克·阿希拉夫
原文出處：https://dev.to/dipakahirav/mastering-cors-the-definitive-guide-with-practical-examples-eml
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式