Angular 14 SSR编译成功后访问报'at XMLHttpRequest.send()'错误求助

这个错误大概率和HTTP/HTTPS端口无关，核心问题出在SSR的Node.js环境与浏览器环境的API差异上，以下是具体排查和解决方向：

1. 检查HTTP请求库的适配性 #

• 必须使用Angular官方的HttpClient，它已经原生适配SSR环境：在Node端会自动调用Node.js的http/https模块发起请求，在浏览器端才会用XMLHttpRequest，不会出现环境不兼容问题。
• 如果使用了第三方请求库（如axios），需要确认该库是否支持SSR，或通过环境判断在Node端切换为原生http模块发起请求。

2. 排查是否直接调用浏览器专属API #

• 检查代码中是否存在直接调用window.XMLHttpRequest、window.fetch这类浏览器专属API的逻辑，Node.js环境没有window对象，这类代码会直接报错。
• 用Angular提供的isPlatformBrowser工具函数做环境判断，隔离浏览器专属代码：

  import { isPlatformBrowser } from '@angular/common';
  import { Inject, PLATFORM_ID } from '@angular/core';
  
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
  
  initRequest() {
    if (isPlatformBrowser(this.platformId)) {
      // 仅在浏览器端执行的请求逻辑
    }
  }
  

3. 核对服务器监听端口（附带排查） #

如果确实怀疑端口问题，可以核对server.ts中的监听配置：

// server.ts 中的端口监听代码
app.listen(process.env.PORT || 4000, () => {
  console.log(`Node Express server listening on http://localhost:${process.env.PORT || 4000}`);
});

确保访问的URL与控制台输出的端口一致（SSR默认端口通常是4000，而非ng serve的4200）。但如果是端口不匹配，表现应该是"无法访问"或404，而非XMLHttpRequest错误。

4. 检查SSR核心模块配置 #

确认app.server.module.ts中已正确导入SSR必需模块，没有遗漏：

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ModuleMapLoaderModule
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

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