使用 Node.js 建立簡易伺服器並解決 CORS 問題
更新於 發佈於 閱讀時間約 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 問題。如果有任何問題，歡迎隨時提出。
68會員
126內容數
這裡將以輕鬆風格，深入探討程式設計的基礎和高級概念。從程式語言到演算法，我們將以易懂的方式解釋每個主題，讓你輕鬆掌握。無論你是初學者或有經驗者，都能在這裡找到適合你的內容。無論你的目標是成為專業開發者還是擴展知識，我們都會陪伴你一同成長！
留言0
查看全部
你可能也想看
Google News 追蹤
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
※ 補充說明：
※ npm 常用指令：
◦ npm init–y：快速初始化一個新的 Node.js 並建立一個 package.json 文件的命令。
◦ npm info 套件名稱 version：快速查詢指定 npm 套件的最新版本號。
◦ npm install套件名稱：用來安裝
Node.js是一個JavaScript運行環境。它使用了一個非阻塞、事件驅動的I/O模型，使其非常適合用於數據密集型的即時應用程序。簡單來說，Node.js允許你使用JavaScript來編寫伺服器端代碼。
nvm
安裝nvm
Windows :
點擊 Releases · coreybut
R036 Blog API 伺服器的維護更新日誌 (2024/04/30)
開發環境技術
語言: Javascript
環境: Node JS
框架: Express.js
本次維護目的
優化及測試API伺服器程運行
重溫程式碼架構以便日後更新優化
Reac
在開發前後端分離架構時，使用兩個不同網域所遇到跨域請求問題。特別是在POST請求時行為差異大，揭示了「簡單請求」與「預檢請求」的關鍵差異。簡單請求不需預檢，但application/json會觸發預檢請求，需透過特定設定解決。分享這篇文章希望幫助開發者有效處理跨域問題。
HTTP伺服器端
package main
import (
"net/http"
)
type Refer struct {
handler http.Handler
refer string
}
//實現中介軟體邏輯
func (this *Refer) ServeHTTP(
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
※ 補充說明：
※ npm 常用指令：
◦ npm init–y：快速初始化一個新的 Node.js 並建立一個 package.json 文件的命令。
◦ npm info 套件名稱 version：快速查詢指定 npm 套件的最新版本號。
◦ npm install套件名稱：用來安裝
Node.js是一個JavaScript運行環境。它使用了一個非阻塞、事件驅動的I/O模型，使其非常適合用於數據密集型的即時應用程序。簡單來說，Node.js允許你使用JavaScript來編寫伺服器端代碼。
nvm
安裝nvm
Windows :
點擊 Releases · coreybut
R036 Blog API 伺服器的維護更新日誌 (2024/04/30)
開發環境技術
語言: Javascript
環境: Node JS
框架: Express.js
本次維護目的
優化及測試API伺服器程運行
重溫程式碼架構以便日後更新優化
Reac
在開發前後端分離架構時，使用兩個不同網域所遇到跨域請求問題。特別是在POST請求時行為差異大，揭示了「簡單請求」與「預檢請求」的關鍵差異。簡單請求不需預檢，但application/json會觸發預檢請求，需透過特定設定解決。分享這篇文章希望幫助開發者有效處理跨域問題。
HTTP伺服器端
package main
import (
"net/http"
)
type Refer struct {
handler http.Handler
refer string
}
//實現中介軟體邏輯
func (this *Refer) ServeHTTP(