Localhost 憑證無效怎麼解決？HTTPS 本機憑證設定教學

引言：那個紅色的「不安全」警告

當你在本機開發時，突然需要測試 HTTPS 功能，於是在網址列輸入 https://localhost:3000，結果瀏覽器跳出嚇人的警告：

「您的連線不安全」、「憑證無效」、「NET::ERR_CERT_AUTHORITY_INVALID」

這時候你可能會想：「這只是本機開發，為什麼要這麼麻煩？」

別擔心，這個問題有多種解決方案。本文將從最簡單的臨時方案，到最完整的 mkcert 設定，一步步帶你解決 localhost HTTPS 憑證問題。

要點一－為什麼會出現「憑證無效」警告？（根本原因）

在解決問題之前，讓我們先了解為什麼會出現這個警告。

HTTPS 憑證的工作原理

當你造訪 https:// 開頭的網站時，瀏覽器會：

1. 要求伺服器出示 SSL 憑證
2. 驗證憑證是否由可信任的機構簽發
3. 確認憑證沒有過期或被撤銷
4. 確認憑證對應的網域正確

如果任何一步驗證失敗，瀏覽器就會顯示「憑證無效」警告。

Localhost 的特殊狀況

當你使用 https://localhost 時，遇到的問題是：

• 沒有任何憑證授權機構（CA）會為 localhost 簽發憑證
• localhost 不是真實的網域，無法取得正規憑證
• 只能使用「自簽憑證」（Self-signed Certificate）

而自簽憑證不被瀏覽器信任，因此會顯示警告。

常見的憑證警告訊息

💡 重要觀念：這些警告在 localhost 開發時是「預期中」的行為，不代表你的程式有問題。

要點二－解法一：直接略過警告（臨時方案）

最快的方法是直接略過瀏覽器的安全警告。這在本機開發時是安全的。

Chrome 略過方法

方法一：點擊「進階」

1. 在警告頁面點擊「進階」
2. 點擊「繼續前往 localhost（不安全）」

方法二：輸入神秘指令

在 Chrome 警告頁面，直接用鍵盤輸入（不會顯示在畫面上）：

thisisunsafe

頁面會自動跳轉到目標網站。

Firefox 略過方法

1. 在警告頁面點擊「進階」
2. 點擊「接受風險並繼續」

Safari 略過方法

1. 點擊「顯示詳細資訊」
2. 點擊「參訪此網站」
3. 輸入管理員密碼確認

這個方法的限制

• ⚠️ 每次重開瀏覽器都需要重新操作
• ⚠️ 某些 API（如 Service Worker）在「不安全」狀態下無法使用
• ⚠️ 無法測試需要嚴格 HTTPS 的功能

適合場景：快速測試、臨時需求

要點三－解法二：Chrome 允許 localhost 不安全連線

Chrome 提供了一個隱藏設定，可以讓 localhost 在 HTTPS 時不顯示警告。

設定步驟

Step 1：開啟 Chrome 旗標設定

在網址列輸入：

chrome://flags/#allow-insecure-localhost

Step 2：啟用設定

找到「Allow invalid certificates for resources loaded from localhost」，將狀態改為「Enabled」。

Step 3：重新啟動 Chrome

點擊頁面底部的「Relaunch」按鈕。

設定效果

啟用後，所有 https://localhost 的連線都不會再顯示憑證警告。網址列仍會顯示「不安全」，但不會阻擋你進入網站。

這個方法的限制

• ⚠️ 只對 Chrome 有效
• ⚠️ 只對 localhost 有效，不適用於 127.0.0.1 或自訂網域
• ⚠️ 仍然無法測試某些嚴格的 HTTPS 功能

適合場景：日常開發、不需要測試 HTTPS 特定功能

要點四－解法三：使用 mkcert 建立本機憑證（推薦！）

如果你需要完整的 HTTPS 功能，或是經常進行本機開發，mkcert 是最佳解決方案。

什麼是 mkcert？

mkcert 是一個簡單的工具，可以：

• 建立本地的憑證授權機構（CA）
• 為 localhost 和任何網域產生有效的憑證
• 自動讓瀏覽器信任這些憑證

安裝 mkcert

macOS（使用 Homebrew）：

brew install mkcert
brew install nss  # 如果你使用 Firefox

Windows（使用 Chocolatey）：

choco install mkcert

Windows（使用 Scoop）：

scoop bucket add extras
scoop install mkcert

Linux（Debian/Ubuntu）：

sudo apt install libnss3-tools
# 下載最新版 mkcert
wget https://github.com/FiloSottile/mkcert/releases/latest/download/mkcert-linux-amd64
chmod +x mkcert-linux-amd64
sudo mv mkcert-linux-amd64 /usr/local/bin/mkcert

設定本地 CA

安裝完成後，執行以下指令建立本地 CA：

mkcert -install

這會：

• 建立本地的根憑證授權機構
• 自動安裝到系統的憑證儲存區
• 讓瀏覽器信任由這個 CA 簽發的憑證

產生 localhost 憑證

mkcert localhost 127.0.0.1 ::1

這會產生兩個檔案：

• localhost+2.pem：憑證檔案
• localhost+2-key.pem：私鑰檔案

為自訂網域產生憑證

如果你使用 hosts 檔案設定了自訂網域（如 myapp.local）：

mkcert localhost 127.0.0.1 myapp.local *.myapp.local

確認憑證有效

產生憑證後，你可以用以下指令查看憑證資訊：

openssl x509 -in localhost+2.pem -text -noout

🚀 需要正式的 SSL 憑證？

重要提醒：mkcert 產生的憑證只能用於本機開發，正式網站需要使用正規的 SSL 憑證。

VibeFix 如何幫助你？

✅ 免費 SSL 憑證設定：使用 Let's Encrypt 自動設定 HTTPS
✅ 自動續期：不用擔心憑證過期
✅ HTTPS 強制跳轉：確保所有流量都走安全連線
✅ 正式網域設定：綁定你自己的網域名稱
✅ CDN 加速：同時獲得 SSL 和 CDN 的好處

💡 為什麼選擇 VibeFix？

• 省時省力：不用自己搞懂 SSL 設定
• 專業可靠：由專業團隊維護
• 一站式服務：從部署到 SSL 一次搞定

新用戶優惠：首次部署享 8 折優惠！

👉 立即點擊了解 VibeFix 專業部署服務！

要點五－在各框架中啟用 HTTPS

有了憑證之後，接下來要在你的開發伺服器中啟用 HTTPS。

React（Vite）

建立 vite.config.js：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import fs from 'fs'

export default defineConfig({
  plugins: [react()],
  server: {
    https: {
      key: fs.readFileSync('./localhost+2-key.pem'),
      cert: fs.readFileSync('./localhost+2.pem'),
    },
  },
})

React（Create React App）

建立 .env 檔案：

HTTPS=true
SSL_CRT_FILE=./localhost+2.pem
SSL_KEY_FILE=./localhost+2-key.pem

Next.js

需要建立自訂伺服器。建立 server.js：

const { createServer } = require('https')
const { parse } = require('url')
const next = require('next')
const fs = require('fs')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

const httpsOptions = {
  key: fs.readFileSync('./localhost+2-key.pem'),
  cert: fs.readFileSync('./localhost+2.pem')
}

app.prepare().then(() => {
  createServer(httpsOptions, (req, res) => {
    const parsedUrl = parse(req.url, true)
    handle(req, res, parsedUrl)
  }).listen(3000, () => {
    console.log('> Ready on https://localhost:3000')
  })
})

Vue（Vite）

在 vite.config.js 中設定：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import fs from 'fs'

export default defineConfig({
  plugins: [vue()],
  server: {
    https: {
      key: fs.readFileSync('./localhost+2-key.pem'),
      cert: fs.readFileSync('./localhost+2.pem'),
    },
  },
})

Node.js（Express）

const express = require('express')
const https = require('https')
const fs = require('fs')

const app = express()

const options = {
  key: fs.readFileSync('./localhost+2-key.pem'),
  cert: fs.readFileSync('./localhost+2.pem')
}

app.get('/', (req, res) => {
  res.send('Hello HTTPS!')
})

https.createServer(options, app).listen(3000, () => {
  console.log('HTTPS Server running on https://localhost:3000')
})

要點六－常見錯誤訊息與解法

即使設定了憑證，有時還是會遇到問題。以下是常見錯誤及解決方法。

錯誤一：NET::ERR_CERT_COMMON_NAME_INVALID

原因：憑證中的網域名稱和你訪問的網域不符。

解決方法：

重新產生包含正確網域的憑證：

# 如果你用 mysite.local 訪問
mkcert localhost 127.0.0.1 mysite.local

錯誤二：NET::ERR_CERT_DATE_INVALID

原因：憑證過期了。

解決方法：

重新產生新的憑證：

mkcert localhost 127.0.0.1

mkcert 產生的憑證預設有效期為 2 年 3 個月。

錯誤三：Firefox 仍顯示警告

原因：Firefox 使用自己的憑證儲存區，mkcert 可能沒有正確安裝。

解決方法：

1. 確認安裝了 nss：

# macOS
brew install nss

# Linux
sudo apt install libnss3-tools

2. 重新執行 mkcert -install

3. 完全關閉 Firefox 再重開

錯誤四：Unable to read certificate file

原因：憑證檔案路徑錯誤或權限問題。

解決方法：

• 確認憑證檔案存在且路徑正確
• 使用絕對路徑而非相對路徑
• 確認檔案有讀取權限

# 檢查檔案是否存在
ls -la localhost+2.pem localhost+2-key.pem

# 確認權限
chmod 644 localhost+2.pem
chmod 600 localhost+2-key.pem

FAQ

Q1：憑證無效可以忽略嗎？

在本機開發時可以忽略。但如果是正式網站顯示憑證無效，代表有安全風險，不應該繼續訪問。

Q2：mkcert 是什麼？

mkcert 是一個開源工具，可以輕鬆建立本地開發用的 SSL 憑證。由 Filippo Valsorda（Go 加密庫的主要維護者）開發。

Q3：正式網站為什麼不用自簽憑證？

因為自簽憑證沒有經過第三方驗證，瀏覽器無法確認你就是網站的真正擁有者。正式網站應該使用 Let's Encrypt 等免費的正規憑證，或購買商業憑證。

結論：選擇適合你的解決方案

各解決方案比較

推薦的選擇

• 臨時測試：直接略過警告
• 日常開發：啟用 Chrome localhost 旗標
• 專業開發 / 需要完整 HTTPS 功能：使用 mkcert

下一步學習建議

1. 基礎概念：Localhost 是什麼？完整解析
2. 其他連線問題：Localhost 拒絕連線完整解決方案
3. 準備上線：Localhost 轉正式上線指南

參考資料

1. mkcert 官方 GitHub
2. Chrome - Allow Invalid Certificates
3. Vite - HTTPS 設定

圖片描述清單

插圖 1：localhost-certificate-invalid-hero
- 用途：文章主視覺圖
- 建議尺寸：1200 x 630 px
- 描述：主視覺圖呈現瀏覽器安全警告情境。畫面中央是 Chrome 瀏覽器視窗，顯示經典的「您的連線不安全」紅色警告頁面，網址列顯示紅色鎖頭圖示和「https://localhost」。旁邊有一個鑰匙和鎖的圖示，象徵「需要正確的憑證」。整體使用紅色警告配色，傳達問題情境但可以解決。
- Slug：localhost-certificate-invalid-hero

插圖 2：localhost-certificate-invalid-chrome-flags
- 用途：Chrome flags 設定教學
- 建議尺寸：1000 x 500 px
- 描述：Chrome 瀏覽器截圖，顯示 chrome://flags 頁面。搜尋框中輸入「localhost」，下方顯示「Allow invalid certificates for resources loaded from localhost」選項，狀態為「Enabled」（用綠色標註）。底部有「Relaunch」按鈕。整體風格清晰，重點區域有標註框。
- Slug：localhost-certificate-invalid-chrome-flags

插圖 3：localhost-certificate-invalid-frameworks
- 用途：各框架 HTTPS 設定對照
- 建議尺寸：1000 x 600 px
- 描述：資訊比較圖呈現各框架的 HTTPS 設定方式。左側列出框架名稱（React Vite、CRA、Next.js、Vue Vite、Express），右側用程式碼片段或設定檔名稱說明設定位置。每個框架用不同顏色標註，整體風格清晰易讀。底部有一行提示「所有框架都需要先用 mkcert 產生憑證」。
- Slug：localhost-certificate-invalid-frameworks

插圖 4：localhost-certificate-invalid-comparison
- 用途：三種解決方案比較
- 建議尺寸：1200 x 500 px
- 描述：視覺化比較圖呈現三種解決方案。從左到右分別是「略過警告」、「Chrome 旗標」、「mkcert」。每個方案用獨立的卡片呈現，包含難度星級、優缺點列表、適合場景說明。右側的「mkcert」卡片用綠色邊框標註「推薦」。整體風格清晰，幫助讀者快速比較選擇。
- Slug：localhost-certificate-invalid-comparison