Angular SSR设置Origin头报错：v16及升级v17失效，v17新项目正常

问题背景 #

正在开发搭配Spring Boot后端的Angular SSR应用，最初基于v16开发，现已升级至v17。后端要求所有HTTP请求（含SSR发起的请求）必须携带Origin头，否则直接拒绝请求。尽管手动设置Origin属于操作受限头，不被官方推荐，但受业务约束必须从SSR服务器注入自定义Origin值。

已实现方案 #

• 创建Angular HttpInterceptor，为Node端发起的所有请求设置Origin头
• 该拦截器在新建的Angular v17 SSR项目中完全正常：Spring Boot后端能接收正确的Origin，且User-Agent符合预期（仅显示node）

遇到的问题 #

1. 将相同逻辑应用到原有v16项目时：
   • 报错：Refused to set unsafe header "Origin"
   • Spring Boot后端接收不到Origin头
   • User-Agent显示为Mozilla/5.0 (Darwin x64) node.js/20.19.0 v8/11.3.244.8-node.26，与v17新项目输出不一致
2. 将原有v16项目升级至v17并完全匹配新项目包版本后，问题依旧：设置Origin失败，SSR请求的User-Agent仍暴露完整环境信息（已通过日志拦截器辅助排查，相关代码及报错截图已留存）

疑问 #

1. Angular v16与v17的SSR底层实现有哪些关键变化？
2. 为何新建v17项目与升级后的v17项目表现不一致？
3. 如何在Angular v16中解决自定义Origin头的设置问题？

解答 #

1. Angular v16与v17 SSR底层关键变化

Angular v17对SSR做了底层重构，核心差异包括：

• SSR引擎替换：v16及之前使用第三方的@nguniversal/express-engine，v17开始官方统一使用@angular/ssr包，完全重写了SSR的请求处理逻辑
• 请求库切换：v16及更早的SSR依赖zone.js提供的XMLHttpRequest polyfill模拟浏览器请求，而v17直接使用Node.js原生的fetch API（基于undici实现），后者允许修改Origin等受限头
• User-Agent默认行为调整：v17对Node端请求的User-Agent做了简化，默认仅暴露node标识；旧版本则会携带完整的Node.js、v8引擎等环境信息

2. 新建v17项目与升级项目表现差异的原因

升级项目时，容易残留旧版本的配置或依赖，导致逻辑冲突：

• 旧Universal依赖未清理：升级后若仍保留@nguniversal/*相关包，会与新的@angular/ssr冲突，迫使请求处理 fallback 到旧的XHR polyfill逻辑
• server.ts配置未完全迁移：v17的server.ts结构与旧版本Universal差异极大，若直接沿用旧文件，SSR引擎无法切换到新的原生fetch实现
• Zone.js配置残留：旧版本Zone.js会拦截XHR请求并阻止修改Origin等受限头，升级后若未更新Zone.js配置或清理旧polyfill规则，仍会触发"unsafe header"错误

3. Angular v16中设置自定义Origin头的解决方案

v16的Universal SSR基于XHR polyfill，直接通过HttpInterceptor设置Origin会被拦截，可通过以下方案解决：

方案一：绕开Angular HttpClient，使用Node.js原生请求库

在服务中判断SSR环境，直接调用node-fetch或axios发起请求，避开Zone.js的XHR拦截：

import { Injectable, PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformServer } from '@angular/common';
import fetch from 'node-fetch';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class ApiService {
  constructor(
    @Inject(PLATFORM_ID) private platformId: Object,
    private httpClient: HttpClient
  ) {}

  async fetchData() {
    if (isPlatformServer(this.platformId)) {
      // SSR环境使用node-fetch
      const response = await fetch('https://your-spring-boot-api.com/data', {
        headers: {
          'Origin': 'your-custom-origin',
          'User-Agent': 'node'
        }
      });
      return response.json();
    } else {
      // 浏览器环境继续使用HttpClient
      return this.httpClient.get('/data').toPromise();
    }
  }
}

方案二：修改Zone.js配置，允许修改Origin头

在server.ts中禁用Zone.js对XHR的拦截，这样HttpInterceptor就能正常设置Origin：

// 必须在导入Zone.js之前添加此配置
(global as any).__Zone_disable_XHR = true;
import 'zone.js';

// 后续server.ts的其他代码...

然后在拦截器中仅针对SSR环境设置头：

import { Injectable, PLATFORM_ID, Inject } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { isPlatformServer } from '@angular/common';
import { Observable } from 'rxjs';

@Injectable()
export class OriginInterceptor implements HttpInterceptor {
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (isPlatformServer(this.platformId)) {
      const modifiedReq = req.clone({
        setHeaders: {
          'Origin': 'your-custom-origin',
          'User-Agent': 'node'
        }
      });
      return next.handle(modifiedReq);
    }
    return next.handle(req);
  }
}

方案三：彻底迁移到v17的官方SSR实现

如果业务允许，彻底清理旧的Universal依赖，按照官方文档完成迁移：

1. 卸载所有@nguniversal/*包：npm uninstall @nguniversal/express-engine @nguniversal/common
2. 安装官方SSR包：npm install @angular/ssr
3. 重新生成server.ts：ng generate server
4. 移除angular.json中旧的Universal相关配置，确保使用新的SSR构建逻辑

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