certificate

如果您使用create-react-app建立應用程序並在本地計算機上運行它，則默認情況下它將使用HTTP協議進行服務。 任何在生產環境運行的應用程序都將使用HTTPS，它是HTTP的安全版本。 在大多數情況下，您將輕而易舉地獲得HTTPS，特別是如果您使用像Netlify或Vercel這樣的現代平台來提供應用程序的話。 但是在本地環境中，情況會比我們希望的要複雜一些。 讓我們看看您可以如何實現這一點！ 正如您所知，create-react-app應用程序是通過npm run start或簡單地通過npm start運行的，因為在package.json文件的scripts部分中，我們有這一行： "start": "react-scripts start" 將其更改為： "start": "HTTPS=true react-scripts start" 這將HTTPS環境變量設置為true值。 但這還不夠。 現在，我們還需要生成一個本地證書。這一步對於任何應用程序都是有效的，不僅僅限於create-react-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文件。 現在將package.json文件中的start腳本更改為： "start": "export HTTPS=true&&SSL\_CRT\_FILE=cert.pem&&SSL\_KEY\_FILE=key.pem react-scripts start", 如果您運行npm run start，並訪問https://localhost:3000（或您的應用程序使用的端口，如果不同-在我的情況下是3008），您應該會看到此警告消息： 要在macOS上解決此問題，請按照我的教程如何在macOS上安裝本地證書的說明進行操作。 一旦您這樣做了，您就可以正常查看使用SSL提供的應用程序了：

註：我在 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 腳本更改為：...