如何让Edge/Chrome信任Next.js生成的localhost自签名证书？

核心原因 #

Chrome和Edge目前对Windows系统根证书存储的读取有严格权限限制，非管理员账户导入的证书可能无法被浏览器识别；另外Next.js自动生成的证书格式可能不完全符合Chrome的验证要求。

解决方案步骤 #

1. 重新导出正确格式的证书 #

• 找到Next.js自动生成证书的路径：Windows下为C:\Users\<你的用户名>\.next\certificates，里面包含localhost.crt和localhost.key
• 打开certmgr.msc，在「受信任的根证书颁发机构」→「证书」中找到Next.js的自签名证书，右键选择「所有任务」→「导出」
• 选择**DER编码的二进制X.509(.CER)**格式，保存到本地容易找到的路径

2. 手动导入到Chrome/Edge的用户证书存储 #

• 打开Chrome/Edge，在地址栏输入chrome://settings/certificates（Edge为edge://settings/certificates）
• 切换到「受信任的根证书颁发机构」标签页，点击「导入」按钮
• 选择刚才导出的.cer文件，按照向导完成导入，确保证书被放入「受信任的根证书颁发机构」存储

3. 彻底刷新浏览器证书缓存 #

• 关闭所有Chrome/Edge窗口，打开任务管理器，结束所有chrome.exe或msedge.exe进程（包括后台运行的进程）
• 重新启动浏览器，访问https://localhost:<你的项目端口>，此时证书应该被正常信任

4. 备选方案：使用自定义生成的合规证书 #

如果上述方法无效，可让IT协助用管理员权限生成符合Chrome要求的证书，再指定给Next.js使用：

• 执行以下OpenSSL命令生成证书（需要预先安装OpenSSL）：

  openssl req -x509 -out localhost.crt -keyout localhost.key \
    -newkey rsa:2048 -nodes -sha256 \
    -subj "/CN=localhost" -extensions EXT -config <( \
      printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")
  

• 修改Next.js启动命令，指定自定义证书路径：

  next dev --experimental-https --cert ./localhost.crt --key ./localhost.key
  

• 将生成的localhost.crt重复步骤2导入到Chrome/Edge的受信任根证书存储

为什么Firefox能正常工作？ #

Firefox使用独立的证书存储系统，不受Windows系统证书存储的权限限制，所以导入证书后可以直接识别信任。

内容的提问来源于stack exchange，提问作者cjkman