如何在启用SSR的Spartacus中读取CloudFront请求头？

我们在为Spartacus Hybris Storefront配置AWS CloudFront作为CDN，需要提取cloudfront-viewer-postal-code请求头的值来实现门店查找功能。目前遇到的问题是：

• 在accstorefront中可以正常读取该请求头
• 启用SSR的JS Storefront中，HttpInterceptor无法获取到该头（打印请求头键列表时看不到cloudfront-viewer-postal-code）

相关代码片段 #

export class InterceptorService implements HttpInterceptor { 
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    const yourHeaderKeys = req.headers.keys() 
    console.log('Headers', yourHeaderKeys);
    return next.handle(req); 
  } 
}

CloudFront配置说明 #

我们已按照AWS标准策略配置了请求头转发，相关配置如下：

• cloudfront-viewer-country-region: 键为CloudFront-Viewer-Country-Region，值为NSW
• cloudfront-viewer-postal-code: 键为CloudFront-Viewer-Postal-Code，值为2000
• cloudfront-viewer-latitude: 键为CloudFront-Viewer-Latitude，值为-33.87150
• cloudfront-viewer-longitude: 键为CloudFront-Viewer-Longitude

可能的原因及解决步骤 #

1. SSR反向代理的请求头转发限制 #

Spartacus SSR基于Angular Universal实现，请求会先经过CloudFront到达SSR服务器（如Nginx），再进入应用代码。如果反向代理未配置转发自定义头，会导致请求头丢失：

• 以Nginx为例，需在配置中明确添加转发规则：

proxy_set_header CloudFront-Viewer-Postal-Code $http_cloudfront_viewer_postal_code;
proxy_set_header CloudFront-Viewer-Country-Region $http_cloudfront_viewer_country_region;
# 其他CloudFront自定义头同理配置

2. 请求头大小写匹配问题 #

HTTP头本身大小写不敏感，但实际处理中可能存在差异，可尝试兼容大小写读取：

const postalCode = req.headers.get('cloudfront-viewer-postal-code') 
  || req.headers.get('CloudFront-Viewer-Postal-Code');

3. CloudFront策略配置验证 #

再次确认CloudFront的源请求策略：

• 确保目标请求头被设置为「包含（Include）」而非「排除（Exclude）」
• 检查是否有缓存策略覆盖了源请求策略，导致头未转发到SSR服务器

4. SSR服务器端与客户端的请求差异 #

SSR初始渲染时，请求由服务器端发起，客户端Interceptor无法捕获这部分请求头。可通过TransferState将服务器端读取的头信息传递到客户端：

// 服务器端代码
import { TransferState, makeStateKey } from '@angular/platform-browser';

const POSTAL_CODE_KEY = makeStateKey<string>('postalCode');

export function appServerModuleFactory(transferState: TransferState) {
  return (req, res) => {
    const postalCode = req.headers['cloudfront-viewer-postal-code'];
    if (postalCode) {
      transferState.set(POSTAL_CODE_KEY, postalCode);
    }
    return createServerRenderer(params => {
      // 现有SSR逻辑
    });
  };
}

之后在客户端服务或Interceptor中读取TransferState存储的值即可。

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