在大多數情況下，http://localhost 的行為與 HTTPS 類似，可用於開發。不過，在某些特殊情況下 (例如自訂主機名稱或跨瀏覽器使用安全 Cookie)，您需要明確設定開發網站的行為與 HTTPS 類似，才能準確呈現網站在正式環境中的運作方式。(如果正式版網站未使用 HTTPS，請優先改用 HTTPS)。
本頁面說明如何在本機透過 HTTPS 執行網站。
如需簡要的操作說明，請參閱 mkcert 快速參考資料。**
使用 mkcert 在本機以 HTTPS 執行網站 (建議)
如要在本機開發網站使用 HTTPS，並存取 https://localhost 或 https://mysite.example (自訂主機名稱)，您需要由裝置和瀏覽器信任的實體簽署傳輸層安全標準 (TLS) 憑證，也就是信任的憑證授權單位 (CA)。瀏覽器會先檢查開發伺服器的憑證是否由信任的 CA 簽署，再建立 HTTPS 連線。
建議使用跨平台的 CA mkcert 建立及簽署憑證。如需其他實用選項，請參閱「透過 HTTPS 在本機執行網站：其他選項」。
許多作業系統都包含用於建立憑證的程式庫，例如 openssl。不過，這些工具比 mkcert 複雜，可靠性也較低，而且不一定能跨平台使用，因此大型開發團隊較難採用。
設定
安裝 mkcert (只需安裝一次)。
按照操作說明，在作業系統上安裝 mkcert。舉例來說，在 macOS 上：
brew install mkcert brew install nss # if you use Firefox將 mkcert 新增至本機根 CA。
在終端機中執行下列指令：
mkcert -install這會產生本機憑證授權單位 (CA)。mkcert 產生的本機 CA 僅在裝置上本機受信任。
產生由 mkcert 簽署的網站憑證。
在終端機中，前往網站的根目錄，或您要保留憑證的任何目錄。
接著執行：
mkcert localhost如果您使用自訂主機名稱 (例如
mysite.example)，請執行下列指令：mkcert mysite.example這項指令會執行以下兩項作業：
- 為您指定的主機名稱產生憑證。
- 讓 mkcert 簽署憑證。
您的憑證現在已準備就緒，並由瀏覽器在本機信任的憑證授權單位簽署。
將伺服器設為使用您剛建立的 TLS 憑證，透過 HTTPS 傳輸資料。
具體做法因伺服器而異，以下列舉幾個例子：
👩🏻💻 使用節點：
server.js(取代{PATH/TO/CERTIFICATE...}和{PORT})：const https = require('https'); const fs = require('fs'); const options = { key: fs.readFileSync('{PATH/TO/CERTIFICATE-KEY-FILENAME}.pem'), cert: fs.readFileSync('{PATH/TO/CERTIFICATE-FILENAME}.pem'), }; https .createServer(options, function (req, res) { // server code }) .listen({PORT});👩🏻💻 使用 http-server：
按照下列步驟啟動伺服器 (請替換
{PATH/TO/CERTIFICATE...})：http-server -S -C {PATH/TO/CERTIFICATE-FILENAME}.pem -K {PATH/TO/CERTIFICATE-KEY-FILENAME}.pem-S會使用 HTTPS 執行伺服器，而-C會設定憑證，-K則會設定金鑰。👩🏻💻 使用 React 開發伺服器：
按照下列方式編輯
package.json，並取代{PATH/TO/CERTIFICATE...}："scripts": { "start": "HTTPS=true SSL_CRT_FILE={PATH/TO/CERTIFICATE-FILENAME}.pem SSL_KEY_FILE={PATH/TO/CERTIFICATE-KEY-FILENAME}.pem react-scripts start"舉例來說，如果您已在網站的根目錄中為
localhost建立憑證：|-- my-react-app |-- package.json |-- localhost.pem |-- localhost-key.pem |--...那麼您的
start指令碼應如下所示："scripts": { "start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start"👩🏻💻 其他範例：
在瀏覽器中開啟
https://localhost或https://mysite.example，再次確認您是在本機執行網站，且使用 HTTPS。由於瀏覽器信任 mkcert 為本機憑證授權單位，因此不會顯示任何瀏覽器警告。
mkcert 快速參考指引
如要透過 HTTPS 執行本機開發網站，請按照下列步驟操作：
-
設定 mkcert。
如果尚未安裝 mkcert，請安裝，例如在 macOS 上：
brew install mkcert
如需 Windows 和 Linux 的操作說明，請參閱安裝 mkcert。
接著，建立本機憑證授權單位：
mkcert -install -
建立信任的憑證。
mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}
這會建立有效憑證，並由 mkcert 自動簽署。
-
將開發伺服器設為使用 HTTPS 和您在步驟 2 中建立的憑證。
現在起，您可以在瀏覽器中存取 https://{YOUR HOSTNAME}，不會再看到警告
</div>
在本機執行 HTTPS 網站：其他選項
以下是設定憑證的其他方式。這類方法通常比使用 mkcert 更複雜或風險更高。
自行簽署的憑證
您也可以決定不使用 mkcert 等本機憑證授權單位，而是自行簽署憑證。這個方法有幾個缺點：
- 瀏覽器不信任您是憑證授權單位，因此會顯示警告，您必須手動略過。在 Chrome 中，您可以使用旗標
#allow-insecure-localhost在localhost上自動略過這項警告。 - 如果您在不安全的網路上工作，這會造成安全風險。
- 與使用 mkcert 等本機 CA 相比，這項工具不一定更簡單或快速。
- 自行簽署的憑證行為與信任的憑證不完全相同。
- 如果您未在瀏覽器環境中使用這項技術，請停用伺服器的憑證驗證。如果忘記在正式環境中重新啟用，就會導致安全問題。
如未指定憑證，React 和 Vue 的開發伺服器 HTTPS 選項會在幕後建立自簽憑證。這項作業很快就能完成，但會出現與自行簽署憑證相同的瀏覽器警告和其他缺點。幸好，您可以使用前端架構的內建 HTTPS 選項，並指定使用 mkcert 或類似工具建立的本機信任憑證。詳情請參閱 React 的 mkcert 範例。
如果您使用 HTTPS 在瀏覽器中開啟本機執行的網站，瀏覽器會檢查本機開發伺服器的憑證。當系統發現您自行簽署憑證時，會檢查您是否已註冊為可信任的憑證授權單位。因此瀏覽器無法信任該憑證，並會顯示警告，指出連線不安全。如果繼續操作，系統仍會建立 HTTPS 連線，但您必須自行承擔風險。
由一般憑證授權單位簽署的憑證
您也可以使用由官方 CA 簽署的憑證。這會帶來下列複雜情況：
- 與使用 mkcert 等本機 CA 技術相比，您需要完成更多設定工作。
- 您必須使用自己控管的有效網域名稱。也就是說，您無法使用官方 CA 執行下列操作：
反向 Proxy
如要透過 HTTPS 存取本機執行的網站，也可以使用反向 Proxy，例如 ngrok。這會帶來下列風險：
- 只要您分享反向 Proxy 網址，對方就能存取本機開發網站。這項功能有助於向客戶展示專案，但未經授權的人員也可能藉此分享私密資訊。
- 部分反向 Proxy 服務會收取使用費，因此價格可能是您選擇服務時的考量因素。
- 瀏覽器的新安全措施可能會影響這些工具的運作方式。
旗標 (不建議)
如果您在 Chrome 中使用自訂主機名稱 (例如 mysite.example)，可以透過旗標強制瀏覽器將 mysite.example 視為安全。請避免這麼做，原因如下：
- 請務必確保
mysite.example一律會解析為本機位址。否則可能會洩漏正式環境憑證。 - 這項標記只能在 Chrome 中運作，因此您無法跨瀏覽器偵錯。
特別感謝所有審查人員和貢獻者 (尤其是 Ryan Sleevi、Filippo Valsorda、Milica Mihajlija 和 Rowan Merewood) 的貢獻和意見回饋。🙌