Express

如何在Express中管理存儲和處理通過表單上傳的文件 這是一個允許用戶上傳文件的HTML表單的示例： <form method="POST" action="/submit-form" enctype="multipart/form-data"> <input type="file" name="document" /> <input type="submit" /> </form> 不要忘記在表單中添加enctype="multipart/form-data"，否則文件將無法被上傳 當用戶點擊提交按鈕時，瀏覽器會自動向與該頁面相同源頭的/submit-form URL 發送一個POST請求。瀏覽器將數據以multipart/form-data的形式而不是編碼的形式（即普通表單的application/x-www-form-urlencoded）發送出去。 在服務器端，處理multipart數據可能會很棘手且容易出錯，因此我們將使用一個名為formidable的實用庫。這是GitHub倉庫，它擁有超過4000顆星且得到良好的維護。 您可以使用以下命令來安裝它： npm install formidable 然後在您的Node.js文件中引入它： const express = require('express') const app = express() const formidable = require('formidable') 現在，在/submit-form路由的POST端點中，我們使用formidable.IncomingForm()實例化一個新的Formidable表單： app.post('/submit-form', (req, res) => { new formidable.IncomingForm() }) 在這樣做之後，我們需要能夠解析表單。我們可以通過提供一個回調函數來同步進行解析，這意味著所有文件都被處理，一旦formidable完成它們的處理，它就會使它們可用： app.post('/submit-form', (req, res) => { new formidable.IncomingForm().parse(req, (err, fields, files) => { if (err) { console.error('Error', err) throw err } console.log('Fields', fields) console.log('Files', files) for (const file of Object....

本文將教你如何使用 Node.js，特別是 Express，來處理檔案上傳。 首先，安裝 express-fileupload npm 模組： npm install express-fileupload 然後將它加入至中介軟體： import fileupload from 'express-fileupload' // 或者 const fileupload = require('express-fileupload') 在你建立了 Express 應用程式之後，加入以下程式碼： app.use( fileupload(), //... 這是必要的，否則伺服器將無法解析檔案上傳。 現在上傳的檔案將會在 req.files 中提供。如果你忘記加入這個中介軟體，req.files 會是 undefined。 以下是處理檔案的最小程式碼範例： app.post('/saveImage', (req, res) => { const image = req.files.myFile const path = __dirname + '/images/' + image.name image.mv(path, (error) => { if (error) { console.error(error) res.writeHead(500, { 'Content-Type': 'application/json' }) res.end(JSON.stringify({ status: 'error', message: error })) return } res....

如何從同一個源中提供React應用和後端應用，而無需在服務器上使用CORS並擔心端口的問題。 我認為最常用的啟動React應用的方式是使用create-react-app命令，這非常方便。 你可能會遇到的問題之一是如何將React應用與您已經擁有的後端應用程式或您可能想要創建的後端應用程式連接起來。 開發過程中 在開發應用程序時，您希望利用熱加載和其他便利的功能。那麼如何在不使用CORS並擔心端口的情況下將其與後端結合起來呢？ 本文將以Express框架提供示例，但這個方法也適用於其他框架。 假設您正在進行測試，那麼讓我們創建一個React應用： npx create-react-app testing 然後 cd testing 現在，在server.js文件中創建一個簡單的Express服務器，您可以將其添加到任何位置，甚至可以是一個單獨的文件夾。 如果您選擇將此文件添加到create-react-app應用程式代碼中，請運行： npm install express 然後，添加以下簡單的Express設置： const express = require('express'); const app = express(); app.get('/hey', (req, res) => res.send('ho!')) app.listen(8080) 關鍵點：打開package.json文件，並將以下代碼添加到其中的某個位置： "proxy": "http://localhost:8080" 這告訴React將API請求代理到使用Express構建的Node.js服務器。 現在使用node server.js運行此Node.js進程。在另一個窗口中，使用npm start啟動CRA應用。 當瀏覽器在端口3000上打開時（默認情況下），在DevTools中執行以下代碼： fetch('/hey') 如果檢查網絡面板，您應該可以看到成功的響應以及ho!消息。 在生產環境中 在生產環境中，當您準備好部署時，您將運行npm run build來編譯React應用程序，並使用Express服務器來提供這些靜態文件。 整個代理的設置在生產環境中是無用的（它也無法正常工作，它只用於開發）。因此，如果您認為方便，可以將其保留在package.json文件中。 在以下代碼中，我們使用了path內置的Node模塊，並告訴應用程序提供React應用的靜態編譯版本： const express = require('express') const path = require('path') const app = express() app.use(express.static(path.join(__dirname, 'build'))) app.get('/ping', (req, res) => { return res.send('pong') }) app....

註：我在 macOS 上運行了這些命令。Linux 應該以相同的方式運行。我不能保證 Windows 的運行結果。 在專案的根目錄下運行以下命令： openssl req -x509 -newkey rsa:2048 -keyout keytmp.pem -out cert.pem -days 365 現在運行以下命令： openssl rsa -in keytmp.pem -out key.pem 現在你應該在資料夾中有 cert.pem 和 key.pem 兩個文件。 使用 Express/Node.js，你可以使用以下代碼加載證書和私鑰： const fs = require('fs') const https = require('https') const app = express() app.get('/', (req, res) => { res.send('Hello HTTPS!') }) https.createServer({ key: fs.readFileSync('key.pem'), cert: fs.readFileSync('cert.pem') }, app).listen(3000, () => { console.log('Listening...') }) 如果你使用的是 create-react-app，請將 package.json 文件中的 start 腳本更改為：...

介紹跨域資源共享，一種讓客戶端和服務器通信的方式，即使它們不在同一個域 在瀏覽器中運行的JavaScript應用程序通常只能訪問提供它的相同域名（源）上的HTTP資源。 加載圖片、腳本和樣式始終可以正常工作，但對另一個服務器的XHR和Fetch調用將失敗，除非該服務器實現了一種方法來允許該連接。 這種方法稱為CORS（Cross-Origin Resource Sharing，跨域資源共享）。 默認情況下，使用@font-face加載Web字體也需要跨域資源共享，還有其他一些不太常見的情況（例如WebGL紋理和Canvas API中加載的drawImage資源）。 在現代瀏覽器中，使用ES模塊（ES Modules）也需要CORS。 如果您沒有在服務器上設置允許提供第三方域的CORS策略，則請求將失敗。 Fetch示例： XHR示例： 如果跨域資源違反以下條件，則會失敗： 不同的域名 不同的子域名 不同的端口 不同的協議 這樣做是為了您的安全，以防止惡意用戶利用Web平台。 但是，如果您控制服務器和客戶端，則有足夠的理由讓它們互相通信。 如何實現呢？ 這取決於您的服務器端堆棧。 瀏覽器支持 非常好（基本上所有瀏覽器，除了IE<10）： 使用Express的示例 如果您使用Node.js和Express作為框架，請使用CORS中間件套件。 下面是一個簡單的Express Node.js服務器實現的例子： const express = require('express') const app = express() app.get('/without-cors', (req, res, next) => { res.json({ msg: '😞 沒有CORS，沒有派對！' }) }) const server = app.listen(3000, () => { console.log('已監聽端口 %s', server.address().port) }) 如果您從不同的源發起fetch請求並使用中間件函數來處理經過響應的端點請求處理程序，則可以使事情正常工作： const express = require('express') const cors = require('cors') const app = express() app....