使用 Node.js 建立簡易伺服器並解決 CORS 問題

閱讀時間約 7 分鐘

在這篇教學文章中,我們將展示如何使用 Node.js 建立一個簡單的伺服器,並解決常見的跨來源資源共享(CORS)問題,確保伺服器能夠接收並處理來自不同來源的資料。


什麼是 CORS?

CORS(Cross-Origin Resource Sharing)是一種安全機制,當瀏覽器發送 AJAX 請求到不同來源的伺服器時,瀏覽器會檢查伺服器是否允許這種跨來源的請求。如果伺服器沒有正確設置 CORS,請求將被瀏覽器阻止,導致伺服器無法收到資料。

1. 初始化專案並安裝必要套件

首先,我們需要初始化一個新的 Node.js 專案,並安裝 expresscors 套件。

  1. 打開終端機,執行以下命令來初始化專案:
    npm init -y
    這會建立一個 package.json 檔案,並設定一些預設的專案設定。
  2. 安裝 expresscors 套件:
    npm install express cors
    express 是一個輕量的 Node.js web 應用程式框架,而 cors 套件可以幫助我們輕鬆地處理 CORS 問題。

2. 建立伺服器端程式碼並啟用 CORS

接下來,我們會建立一個名為 server.js 的檔案,並添加伺服器端程式碼。這個程式會建立一個簡單的伺服器,並處理 CORS。

  1. 建立 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 檔案,包含一個表單來發送資料到伺服器。

  1. 建立 client.html 檔案,並添加以下內容:
    <!DOCTYPE html>
    <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>
    在這個 HTML 檔案中,我們建立了一個包含輸入框和提交按鈕的表單。使用 JavaScript 來攔截表單的提交,並使用 fetch 函式將資料發送到伺服器。

4. 啟動伺服器

現在,我們可以啟動伺服器。在終端機中運行以下命令:

node server.js

您應該會看到以下訊息,表示伺服器已成功啟動:

Server is running on http://localhost:3000

5. 測試發送資料

打開瀏覽器,開啟 client.html 檔案。填寫表單並提交,這次應該不會再遇到 CORS 問題,伺服器將能夠成功接收資料,並在終端機中打印收到的資料。

總結

通過這篇教學,我們學習了如何使用 Node.js 建立簡易伺服器,並解決 CORS 問題。當我們希望伺服器接收來自不同來源的請求時,處理 CORS 是必不可少的步驟。希望這篇文章能幫助您順利解決在開發過程中遇到的 CORS 問題。如果有任何問題,歡迎隨時提出。

avatar-img
67會員
118內容數
這裡將以輕鬆風格,深入探討程式設計的基礎和高級概念。從程式語言到演算法,我們將以易懂的方式解釋每個主題,讓你輕鬆掌握。無論你是初學者或有經驗者,都能在這裡找到適合你的內容。無論你的目標是成為專業開發者還是擴展知識,我們都會陪伴你一同成長!
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
程式輕鬆玩 的其他內容
在這篇教學中,我們將介紹如何使用 Excel VBA 來發送訊息到 LINE Notify。LINE Notify 是 LINE 提供的服務,可以透過 API 發送訊息到 LINE 上。這篇教學將帶你步驟一步完成設置。
隨著人工智慧(AI)技術的快速發展,微軟的Copilot和各種人工智慧個人助理(AIPC)應運而生,並在不同領域展現出獨特的優勢。本文將深入分析這兩者在功能、應用範圍和技術基礎上的異同。
在求職面試中,行為面試問題是面試官常用的一種方法,這類問題旨在了解你過去的經歷,從而推測你未來在類似情境中的表現。回答這類問題時,結構化的回應可以使你的回答更加清晰、有條理,也更能打動面試官。STAR 法則是一個非常實用的技巧,幫助你有效地組織回答。以下是 STAR 法則的詳細說明及應用範例。
Visual Basic for Applications(VBA)是一種功能強大的程式語言,廣泛用於自動化 Microsoft Office 應用程式中的重複性任務。在這篇教學文章中,我們將介紹如何使用 VBA 來新增、刪除和移動檔案。
隨著科技的不斷進步,人工智慧(AI)逐漸成為我們生活中不可或缺的一部分。近年來,市場上出現了一種新型的電腦,稱為AIPC(Artificial Intelligence Personal Computer,人工智慧個人電腦)。那麼,AIPC到底是什麼?它與我們日常使用的PC(個人電腦)有何不同?
2024年台北國際電腦展(COMPUTEX 2024)於6月4日至7日在台北南港展覽館盛大舉行,吸引了來自全球的1,500家廠商展示4,500個攤位。本次展覽的主題為「AI串聯,共創未來」(Connecting AI),重點聚焦於人工智慧運算、前瞻通訊、未來移動、沉浸現實、綠能永續及創新等六大領域​
在這篇教學中,我們將介紹如何使用 Excel VBA 來發送訊息到 LINE Notify。LINE Notify 是 LINE 提供的服務,可以透過 API 發送訊息到 LINE 上。這篇教學將帶你步驟一步完成設置。
隨著人工智慧(AI)技術的快速發展,微軟的Copilot和各種人工智慧個人助理(AIPC)應運而生,並在不同領域展現出獨特的優勢。本文將深入分析這兩者在功能、應用範圍和技術基礎上的異同。
在求職面試中,行為面試問題是面試官常用的一種方法,這類問題旨在了解你過去的經歷,從而推測你未來在類似情境中的表現。回答這類問題時,結構化的回應可以使你的回答更加清晰、有條理,也更能打動面試官。STAR 法則是一個非常實用的技巧,幫助你有效地組織回答。以下是 STAR 法則的詳細說明及應用範例。
Visual Basic for Applications(VBA)是一種功能強大的程式語言,廣泛用於自動化 Microsoft Office 應用程式中的重複性任務。在這篇教學文章中,我們將介紹如何使用 VBA 來新增、刪除和移動檔案。
隨著科技的不斷進步,人工智慧(AI)逐漸成為我們生活中不可或缺的一部分。近年來,市場上出現了一種新型的電腦,稱為AIPC(Artificial Intelligence Personal Computer,人工智慧個人電腦)。那麼,AIPC到底是什麼?它與我們日常使用的PC(個人電腦)有何不同?
2024年台北國際電腦展(COMPUTEX 2024)於6月4日至7日在台北南港展覽館盛大舉行,吸引了來自全球的1,500家廠商展示4,500個攤位。本次展覽的主題為「AI串聯,共創未來」(Connecting AI),重點聚焦於人工智慧運算、前瞻通訊、未來移動、沉浸現實、綠能永續及創新等六大領域​
你可能也想看
Google News 追蹤
Thumbnail
國泰CUBE App 整合外幣換匯、基金、證券等服務,提供簡便、低成本的美股定期定額投資解決方案。 5分鐘開戶、低投資門檻,幫助新手輕鬆進軍國際股市;提供人氣排行榜,讓投資人能夠掌握市場趨勢。
Thumbnail
嗨,你有沒有想過用 ChatGPT 來減少 DevOps 工作? 今天我將向您展示如何使用 ChatGPT 減少 NodeJS 網絡應用程式的鏡像大小。 您會驚訝於 ChatGPT 如何能夠在短短幾分鐘內輕鬆生成一個無錯誤的 Docker 文件,來優化 Node.js docker 映像的大小。
Thumbnail
PROCESS macro for SPSS 可以用非常簡單方式學會調節中介模式。本文將介紹四種類型的變項,並解釋調節式中介的公式,還有如何操作最4.0版本的PROCESS macro for SPSS。文末也會附上所有所有Process模型圖例,提供給讀者方便分析~
Thumbnail
由於Javascript本身設計就適合於單線程的應用, 但一般後端應用程式都會支援多個服務來處理client的請求, nodejs中也提供了cluster模組來達成此功能。 Cluster的原理很簡單,由於每個Process都只能用單核心的CPU來運行,那麼就多開幾個來幫忙處理吧! 而這個Clust
Thumbnail
PROCESS macro for SPSS 可以用非常簡單方式使用調節分析。本文將介紹三種類型的變項,還有如何操作最4.2版本的PROCESS macro for SPSS進行調節模式。文末也會附上所有所有Process模型圖例,提供給讀者方便分析~
Thumbnail
PROCESS macro for SPSS 可以用非常簡單方式進中介模式。本文將介紹三種類型的變項,還有如何操作最4.0版本的PROCESS macro for SPSS。文末也會附上所有所有Process模型圖例,提供給讀者方便分析~
Thumbnail
Potato Media雖然和方格子及Matters同樣歸類為寫作平台,同樣強調將內容變現,前者卻與後面兩者完全不同,當然,所獲得的收入報酬也不會一樣,更清楚一點來說,連獲得收益的方式也大不相同。
Thumbnail
我們將介紹各種類型的信度和統計方法,包含Cohen Kappa 係數、組內相關係數、α係數的SPSS教學。信度的可以使用不同的評估方法來評估。信度對於確定評分標準或量表的一致性和穩定度至關重要。
Thumbnail
如果依變項並非連續變項時,就可以改用羅吉斯迴歸。接下來本文將介紹勝算、勝算比、計算範例、二元/順序/多項式羅吉斯迴歸分析範例和SPSS操作方法。
Thumbnail
國泰CUBE App 整合外幣換匯、基金、證券等服務,提供簡便、低成本的美股定期定額投資解決方案。 5分鐘開戶、低投資門檻,幫助新手輕鬆進軍國際股市;提供人氣排行榜,讓投資人能夠掌握市場趨勢。
Thumbnail
嗨,你有沒有想過用 ChatGPT 來減少 DevOps 工作? 今天我將向您展示如何使用 ChatGPT 減少 NodeJS 網絡應用程式的鏡像大小。 您會驚訝於 ChatGPT 如何能夠在短短幾分鐘內輕鬆生成一個無錯誤的 Docker 文件,來優化 Node.js docker 映像的大小。
Thumbnail
PROCESS macro for SPSS 可以用非常簡單方式學會調節中介模式。本文將介紹四種類型的變項,並解釋調節式中介的公式,還有如何操作最4.0版本的PROCESS macro for SPSS。文末也會附上所有所有Process模型圖例,提供給讀者方便分析~
Thumbnail
由於Javascript本身設計就適合於單線程的應用, 但一般後端應用程式都會支援多個服務來處理client的請求, nodejs中也提供了cluster模組來達成此功能。 Cluster的原理很簡單,由於每個Process都只能用單核心的CPU來運行,那麼就多開幾個來幫忙處理吧! 而這個Clust
Thumbnail
PROCESS macro for SPSS 可以用非常簡單方式使用調節分析。本文將介紹三種類型的變項,還有如何操作最4.2版本的PROCESS macro for SPSS進行調節模式。文末也會附上所有所有Process模型圖例,提供給讀者方便分析~
Thumbnail
PROCESS macro for SPSS 可以用非常簡單方式進中介模式。本文將介紹三種類型的變項,還有如何操作最4.0版本的PROCESS macro for SPSS。文末也會附上所有所有Process模型圖例,提供給讀者方便分析~
Thumbnail
Potato Media雖然和方格子及Matters同樣歸類為寫作平台,同樣強調將內容變現,前者卻與後面兩者完全不同,當然,所獲得的收入報酬也不會一樣,更清楚一點來說,連獲得收益的方式也大不相同。
Thumbnail
我們將介紹各種類型的信度和統計方法,包含Cohen Kappa 係數、組內相關係數、α係數的SPSS教學。信度的可以使用不同的評估方法來評估。信度對於確定評分標準或量表的一致性和穩定度至關重要。
Thumbnail
如果依變項並非連續變項時,就可以改用羅吉斯迴歸。接下來本文將介紹勝算、勝算比、計算範例、二元/順序/多項式羅吉斯迴歸分析範例和SPSS操作方法。