使用 Node.js 建立簡易伺服器並解決 CORS 問題
在這篇教學文章中，我們將展示如何使用 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 問題。如果有任何問題，歡迎隨時提出。
57會員
116內容數
這裡將以輕鬆風格，深入探討程式設計的基礎和高級概念。從程式語言到演算法，我們將以易懂的方式解釋每個主題，讓你輕鬆掌握。無論你是初學者或有經驗者，都能在這裡找到適合你的內容。無論你的目標是成為專業開發者還是擴展知識，我們都會陪伴你一同成長！
留言0
查看全部
你可能也想看
八十-二十法則提到，在多數生活的現象中，約80%的效果是來自於20%的原因，除了經濟學、學習理論外，這個法則同樣也可以應用在生活中的幸福感上。
我們需要認知到擁有的越多不一定會越快樂，反而有可能會因為無法專注在少數事物上而產生空虛、迷茫的感覺。「極簡」精神最重要的一點在於放下對於「多」的執著，將有
1.加權指數與櫃買指數
週五的加權指數在非農就業數據開出來後，雖稍微低於預期，但指數仍向上噴出，在美股開盤後於21500形成一個爆量假突破後急轉直下，就一路收至最低。 台股方面走勢需觀察週一在斷頭潮出現後，週二或週三開始有無買單進場支撐，在沒有明確的反轉訊號形成前，小夥伴盡量不要貿然抄底，或是追空
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎？
新版式整體視覺上「更加凸顯圖片」，為了搭配這次的更新，我們推出首次貼文策展 ❤️
使用貼文功能並完成這次的指定任務，還有機會獲得富士即可拍，讓你的美好回憶都可以用即可拍珍藏！
簡單紀錄使用 Node.js 的好處，以及安裝 Node.js 的建議作法，最後也簡單提及了 Node.js 的 REPL 環境，讓我們能直接在 terminal 寫 JavaScript 程式。
嗨，你有沒有想過用 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操作方法。
八十-二十法則提到，在多數生活的現象中，約80%的效果是來自於20%的原因，除了經濟學、學習理論外，這個法則同樣也可以應用在生活中的幸福感上。
我們需要認知到擁有的越多不一定會越快樂，反而有可能會因為無法專注在少數事物上而產生空虛、迷茫的感覺。「極簡」精神最重要的一點在於放下對於「多」的執著，將有
1.加權指數與櫃買指數
週五的加權指數在非農就業數據開出來後，雖稍微低於預期，但指數仍向上噴出，在美股開盤後於21500形成一個爆量假突破後急轉直下，就一路收至最低。 台股方面走勢需觀察週一在斷頭潮出現後，週二或週三開始有無買單進場支撐，在沒有明確的反轉訊號形成前，小夥伴盡量不要貿然抄底，或是追空
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎？
新版式整體視覺上「更加凸顯圖片」，為了搭配這次的更新，我們推出首次貼文策展 ❤️
使用貼文功能並完成這次的指定任務，還有機會獲得富士即可拍，讓你的美好回憶都可以用即可拍珍藏！
簡單紀錄使用 Node.js 的好處，以及安裝 Node.js 的建議作法，最後也簡單提及了 Node.js 的 REPL 環境，讓我們能直接在 terminal 寫 JavaScript 程式。
嗨，你有沒有想過用 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操作方法。