本地主机上的 Angular 17 SSR + SSL 未从 .net core 后端获取数据，因为调用来自邮递员

Question

我真的需要帮助来解决这个问题。我使用此命令在本地主机上运行 Angular npm start

"start": "ng serve  --ssl --ssl-cert %APPDATA%\\ASP.NET\\https\\%npm_package_name%.pem --ssl-key %APPDATA%\\ASP.NET\\https\\%npm_package_name%.key --host=127.0.0.1"

该网站正在浏览器中运行，但是当我尝试指出来自邮递员的网址（我将模拟 Facebook 爬虫）时，该服务无法从后端检索数据，并且在控制台输出中给出了此错误- 来自 mt 自定义 http 处理程序

ErrorHandlerService 0 - "Http failure response for https://localhost:7093/api/Product/LoadProduct/21275402: 0 undefined"
Error
    at eval (c:/GitHub/iperedil/angularapp/src/app/error-handler.services.ts:25:37)
    at _Observable.init (c:/GitHub/iperedil/angularapp/node_modules/rxjs/dist/esm/internal/observable/throwError.js:5:51)
    at _Observable._trySubscribe (c:/GitHub/iperedil/angularapp/node_modules/rxjs/dist/esm/internal/Observable.js:37:25)
    at eval (c:/GitHub/iperedil/angularapp/node_modules/rxjs/dist/esm/internal/operators/catchError.js:14:31)

如果我将链接 https://localhost:7093/api/Product/LoadProduct/21275402 放入浏览器中仍然可以工作，这就是 ErrorHandler 代码

export class ErrorHandlerService implements HttpInterceptor {
  constructor(private router: Router, private authservice: AuthService) { }
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req)
      .pipe(
        catchError((error: HttpErrorResponse) => {
          console.log('ErrorHandlerService ' + error.status + ' - ' + JSON.stringify(error.message)); HERE
          if (error instanceof HttpErrorResponse && error.status === 401 &&
          } else {
            return throwError(() => new Error(errorMessage));
          }
        })
      )
  } 

这是我迁移到 V17.0.3 时开始的

如果我注释掉拦截器的一部分，我会收到此错误

HttpErrorResponse {
  headers: _HttpHeaders {
    normalizedNames: Map(0) {},
    lazyUpdate: null,
    headers: Map(0) {}
  },
  status: 0,
  statusText: 'Unknown Error',
  url: 'https://localhost:7093/api/Product/LoadProduct/21275402',
  ok: false,
  name: 'HttpErrorResponse',
  message: 'Http failure response for https://localhost:7093/api/Product/LoadProduct/21275402: 0 undefined',
  error: TypeError: fetch failed
      at node:internal/deps/undici/undici:12345:11
      at _ZoneDelegate.invoke (c:/GitHub/iperedil/angularapp/node_modules/zone.js/fesm2015/zone-node.js:368:26)
      at Object.onInvoke (c:/GitHub/iperedil/angularapp/node_modules/@angular/core/fesm2022/core.mjs:14424:33)
      at _ZoneDelegate.invoke (c:/GitHub/iperedil/angularapp/node_modules/zone.js/fesm2015/zone-node.js:367:52)
      at _Zone.run (c:/GitHub/iperedil/angularapp/node_modules/zone.js/fesm2015/zone-node.js:130:43)
      at eval (c:/GitHub/iperedil/angularapp/node_modules/zone.js/fesm2015/zone-node.js:1191:36)
      at _ZoneDelegate.invokeTask (c:/GitHub/iperedil/angularapp/node_modules/zone.js/fesm2015/zone-node.js:403:31)
      ... 2 lines matching cause stack trace ...
      at _ZoneDelegate.invokeTask (c:/GitHub/iperedil/angularapp/node_modules/zone.js/fesm2015/zone-node.js:402:36) {
    cause: Error: self-signed certificate
        at TLSSocket.onConnectSecure (node:_tls_wrap:1674:34)
        at _ZoneDelegate.invokeTask (c:/GitHub/iperedil/angularapp/node_modules/zone.js/fesm2015/zone-node.js:403:31)
        at eval (c:/GitHub/iperedil/angularapp/node_modules/@angular/core/fesm2022/core.mjs:14098:55)
        at AsyncStackTaggingZoneSpec.onInvokeTask (c:/GitHub/iperedil/angularapp/node_modules/@angular/core/fesm2022/core.mjs:14098:36)
        at _ZoneDelegate.invokeTask (c:/GitHub/iperedil/angularapp/node_modules/zone.js/fesm2015/zone-node.js:402:36)
        at Object.onInvokeTask (c:/GitHub/iperedil/angularapp/node_modules/@angular/core/fesm2022/core.mjs:14411:33)
        at _ZoneDelegate.invokeTask (c:/GitHub/iperedil/angularapp/node_modules/zone.js/fesm2015/zone-node.js:402:36)
        at _Zone.runTask (c:/GitHub/iperedil/angularapp/node_modules/zone.js/fesm2015/zone-node.js:174:47)
        at invokeTask (c:/GitHub/iperedil/angularapp/node_modules/zone.js/fesm2015/zone-node.js:484:34)
        at TLSSocket.ZoneTask.invoke (c:/GitHub/iperedil/angularapp/node_modules/zone.js/fesm2015/zone-node.js:473:48) {
      code: 'DEPTH_ZERO_SELF_SIGNED_CERT'

Answer 1

我在

DEPTH_ZERO_SELF_SIGNED_CERT

上与

@angular/common 17.3.7

遇到了

@angular/ssr 17.3.6

。

您看到的错误是 SSR 的 HTTPClient 在服务器端执行 Web 请求，以便它可以将渲染的 HTML 发送到客户端，请参阅 https://angular.io/guide/ssr#caching-data-when -using-httpclient 了解有关如何与水合和 SSR 集成的更多信息。

虽然您可能已将 SSL 证书添加到系统的 CA 证书列表中，并且这允许浏览器原谅您的自签名证书，但 Node.js 并不那么宽容。

我通过在开发中运行时将

NODE_TLS_REJECT_UNAUTHORIZED

环境变量设置为

0

自己解决了这个问题。

我使用以下命令在我的项目上设置了环境：

ng generate environments

然后我将以下属性添加到

./src/app/environments/environment.development.ts

export const environment = {
  ssrIgnoresSsl: true,
};

在

./src/main.server.ts

中我添加了以下内容：

import { environment } from './environments/environment';

if (true === environment?.ssrIgnoresSsl) {
  console.warn('main.server.ts: SSR is running with SSL Certificate Checking disabled because environment.ssrIgnoresSsl is true.');
  process.env['NODE_TLS_REJECT_UNAUTHORIZED'] = '0';
}

const bootstrap ...

在

package.json

中，我的启动脚本如下所示，请观察

--configuration

。

"scripts": {
  ...
  "start": "ng serve --ssl --ssl-key ../ssl/server.key --ssl-cert ../ssl/server.crt --configuration development",
  ...
}

ng generate

命令还将修改您的

angular.json

文件以包括：

"fileReplacements": [
  {
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.development.ts"
  }
]

现在，当您运行

npm start

时，

environment.development.ts

将在构建期间复制到

environment.ts

，并且您的SSR服务器

main.server.ts

将在Node.js环境中设置

NODE_TLS_REJECT_UNAUTHORIZED

。

当您在开发中运行时，您应该会在终端中看到

main.server.ts: SSR is running with SSL Certificate Checking disabled because environment.ssrIgnoresSsl is true.

，而在生产中看不到它。

为了确保 SSR 正在运行，请在浏览器中加载应用程序，在 DevTools 中打开网络，强制刷新，您的第一个请求的响应应包含完整的 HTML，其中包含您的产品详细信息（我认为这是您根据 API 看到的内容）路线）。

我自己用来解决这个问题的来源：

• https://github.com/node-fetch/node-fetch/issues/19#issuecomment-369653134
• https://angular.io/guide/build#configure-environment-specific-defaults
• Angular、节点 API、如何使用 SSL 本地主机、DEPTH_ZERO_SELF_SIGNED_CERT、Cookie（问题）
• https://github.com/drwpow/openapi-typescript/issues/1512#issuecomment-1902237115