使用 Node.js 建立簡易伺服器並解決 CORS 問題
更新於 2024/08/09閱讀時間約 7 分鐘
在這篇教學文章中，我們將展示如何使用 Node.js 建立一個簡單的伺服器，並解決常見的跨來源資源共享（CORS）問題，確保伺服器能夠接收並處理來自不同來源的資料。
什麼是 CORS？
CORS（Cross-Origin Resource Sharing）是一種安全機制，當瀏覽器發送 AJAX 請求到不同來源的伺服器時，瀏覽器會檢查伺服器是否允許這種跨來源的請求。如果伺服器沒有正確設置 CORS，請求將被瀏覽器阻止，導致伺服器無法收到資料。
1. 初始化專案並安裝必要套件
首先，我們需要初始化一個新的 Node.js 專案，並安裝 express 和 cors 套件。
- 打開終端機，執行以下命令來初始化專案：
npm init -y
這會建立一個package.json檔案，並設定一些預設的專案設定。 - 安裝
express和cors套件：npm install express corsexpress是一個輕量的 Node.js web 應用程式框架，而cors套件可以幫助我們輕鬆地處理 CORS 問題。
2. 建立伺服器端程式碼並啟用 CORS
接下來，我們會建立一個名為 server.js 的檔案，並添加伺服器端程式碼。這個程式會建立一個簡單的伺服器，並處理 CORS。
- 建立
server.js檔案，並添加以下內容：const express = require('express');
在這段程式碼中，我們引入了
const cors = require('cors'); // 引入 cors 套件
const app = express();
const port = 3000;
app.use(express.json());
app.use(cors()); // 啟用 CORS
// 簡單的 GET 路由
app.get('/', (req, res) => {
res.send('Hello, World!');
});
// POST 路由來接收資料
app.post('/data', (req, res) => {
const receivedData = req.body;
console.log('Received data:', receivedData);
res.send('Data received');
});
app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});cors套件，並通過app.use(cors())啟用了 CORS 支援，這樣伺服器便允許任何來源發送請求。
3. 建立使用者端 HTML 檔案
接下來，我們會建立一個簡單的 HTML 檔案，包含一個表單來發送資料到伺服器。
- 建立
client.html檔案，並添加以下內容：<!DOCTYPE html>
在這個 HTML 檔案中，我們建立了一個包含輸入框和提交按鈕的表單。使用 JavaScript 來攔截表單的提交，並使用
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Client</title>
</head>
<body>
<h1>Send Data to Server</h1>
<form id="dataForm">
<label for="data">Data:</label>
<input type="text" id="data" name="data" required>
<button type="submit">Send</button>
</form>
<script>
document.getElementById('dataForm').addEventListener('submit', function(event) {
event.preventDefault();
const data = { data: document.getElementById('data').value };
fetch('http://localhost:3000/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
})
.then(response => response.text())
.then(responseText => {
alert('Response from server: ' + responseText);
})
.catch(error => {
console.error('Error:', error);
});
});
</script>
</body>
</html>fetch函式將資料發送到伺服器。
4. 啟動伺服器
現在，我們可以啟動伺服器。在終端機中運行以下命令：
node server.js
您應該會看到以下訊息，表示伺服器已成功啟動：
Server is running on http://localhost:3000
5. 測試發送資料
打開瀏覽器，開啟 client.html 檔案。填寫表單並提交，這次應該不會再遇到 CORS 問題，伺服器將能夠成功接收資料，並在終端機中打印收到的資料。
總結
通過這篇教學，我們學習了如何使用 Node.js 建立簡易伺服器，並解決 CORS 問題。當我們希望伺服器接收來自不同來源的請求時，處理 CORS 是必不可少的步驟。希望這篇文章能幫助您順利解決在開發過程中遇到的 CORS 問題。如果有任何問題，歡迎隨時提出。
67會員
118內容數
這裡將以輕鬆風格，深入探討程式設計的基礎和高級概念。從程式語言到演算法，我們將以易懂的方式解釋每個主題，讓你輕鬆掌握。無論你是初學者或有經驗者，都能在這裡找到適合你的內容。無論你的目標是成為專業開發者還是擴展知識，我們都會陪伴你一同成長！
留言0
查看全部
你可能也想看
Google News 追蹤
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
嗨，你有沒有想過用 ChatGPT 來減少 DevOps 工作？
今天我將向您展示如何使用 ChatGPT 減少 NodeJS 網絡應用程式的鏡像大小。
您會驚訝於 ChatGPT 如何能夠在短短幾分鐘內輕鬆生成一個無錯誤的 Docker 文件，來優化 Node.js docker 映像的大小。
PROCESS macro for SPSS 可以用非常簡單方式學會調節中介模式。本文將介紹四種類型的變項，並解釋調節式中介的公式，還有如何操作最4.0版本的PROCESS macro for SPSS。文末也會附上所有所有Process模型圖例，提供給讀者方便分析~
由於Javascript本身設計就適合於單線程的應用, 但一般後端應用程式都會支援多個服務來處理client的請求, nodejs中也提供了cluster模組來達成此功能。
Cluster的原理很簡單，由於每個Process都只能用單核心的CPU來運行，那麼就多開幾個來幫忙處理吧！ 而這個Clust
PROCESS macro for SPSS 可以用非常簡單方式使用調節分析。本文將介紹三種類型的變項，還有如何操作最4.2版本的PROCESS macro for SPSS進行調節模式。文末也會附上所有所有Process模型圖例，提供給讀者方便分析~
PROCESS macro for SPSS 可以用非常簡單方式進中介模式。本文將介紹三種類型的變項，還有如何操作最4.0版本的PROCESS macro for SPSS。文末也會附上所有所有Process模型圖例，提供給讀者方便分析~
Potato Media雖然和方格子及Matters同樣歸類為寫作平台，同樣強調將內容變現，前者卻與後面兩者完全不同，當然，所獲得的收入報酬也不會一樣，更清楚一點來說，連獲得收益的方式也大不相同。
我們將介紹各種類型的信度和統計方法，包含Cohen Kappa 係數、組內相關係數、α係數的SPSS教學。信度的可以使用不同的評估方法來評估。信度對於確定評分標準或量表的一致性和穩定度至關重要。
如果依變項並非連續變項時，就可以改用羅吉斯迴歸。接下來本文將介紹勝算、勝算比、計算範例、二元/順序/多項式羅吉斯迴歸分析範例和SPSS操作方法。
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
嗨，你有沒有想過用 ChatGPT 來減少 DevOps 工作？
今天我將向您展示如何使用 ChatGPT 減少 NodeJS 網絡應用程式的鏡像大小。
您會驚訝於 ChatGPT 如何能夠在短短幾分鐘內輕鬆生成一個無錯誤的 Docker 文件，來優化 Node.js docker 映像的大小。
PROCESS macro for SPSS 可以用非常簡單方式學會調節中介模式。本文將介紹四種類型的變項，並解釋調節式中介的公式，還有如何操作最4.0版本的PROCESS macro for SPSS。文末也會附上所有所有Process模型圖例，提供給讀者方便分析~
由於Javascript本身設計就適合於單線程的應用, 但一般後端應用程式都會支援多個服務來處理client的請求, nodejs中也提供了cluster模組來達成此功能。
Cluster的原理很簡單，由於每個Process都只能用單核心的CPU來運行，那麼就多開幾個來幫忙處理吧！ 而這個Clust
PROCESS macro for SPSS 可以用非常簡單方式使用調節分析。本文將介紹三種類型的變項，還有如何操作最4.2版本的PROCESS macro for SPSS進行調節模式。文末也會附上所有所有Process模型圖例，提供給讀者方便分析~
PROCESS macro for SPSS 可以用非常簡單方式進中介模式。本文將介紹三種類型的變項，還有如何操作最4.0版本的PROCESS macro for SPSS。文末也會附上所有所有Process模型圖例，提供給讀者方便分析~
Potato Media雖然和方格子及Matters同樣歸類為寫作平台，同樣強調將內容變現，前者卻與後面兩者完全不同，當然，所獲得的收入報酬也不會一樣，更清楚一點來說，連獲得收益的方式也大不相同。
我們將介紹各種類型的信度和統計方法，包含Cohen Kappa 係數、組內相關係數、α係數的SPSS教學。信度的可以使用不同的評估方法來評估。信度對於確定評分標準或量表的一致性和穩定度至關重要。
如果依變項並非連續變項時，就可以改用羅吉斯迴歸。接下來本文將介紹勝算、勝算比、計算範例、二元/順序/多項式羅吉斯迴歸分析範例和SPSS操作方法。