Angular 17 SSR刷新页面调用本地ASP.Net Core Web API遇fetch失败错误

问题根源 #

这个错误是SSR阶段服务端（Node.js环境）发起HTTP请求时，默认拒绝信任自签名证书导致的：

• 刷新页面会触发完整的SSR流程，服务端直接向API发起请求，Node.js对自签名证书的校验规则比浏览器严格，直接抛出错误
• 浏览器环境下，自签名证书会提示用户手动信任，所以客户端请求时不会直接报错；而同域名部署时，证书属于同一域名范畴，Node.js也不会触发校验

浏览器开发者工具看不到错误，是因为错误发生在服务端而非客户端请求流程中；toast无法关闭则是因为SSR阶段渲染的弹窗未完成客户端hydration，事件绑定失效。

解决方案 #

1. 开发环境临时快速解决（仅限开发，禁止生产使用） #

在启动SSR项目时，通过环境变量禁用Node.js的证书校验：

NODE_TLS_REJECT_UNAUTHORIZED=0 ng serve --ssr

或者在服务端入口文件（比如main.server.ts）开头添加：

// 仅在开发环境启用，生产环境务必删除
if (environment.production === false) {
  process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0';
}

2. 开发环境更安全的方案 #

将你的自签名证书加入Node.js的信任列表：

• 导出API的自签名证书为.pem格式
• 启动项目时指定额外信任的证书：

NODE_EXTRA_CA_CERTS=/path/to/your/api-cert.pem ng serve --ssr

这种方式既解决了证书校验问题，又不会全局禁用所有证书校验，比第一种更安全。

3. 生产环境必选方案 #

替换自签名证书为受信任的合法SSL证书（比如Let's Encrypt提供的免费证书），生产环境绝对不能禁用证书校验或使用自签名证书，否则会带来严重的安全风险。

额外注意 #

• 确保在服务端代码中，API请求的URL使用正确的HTTPS协议，避免混合内容问题
• 如果使用Angular Universal，确认服务端模块的HTTP客户端配置和客户端一致，没有额外的证书校验逻辑

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