Angular 17 SSR中REQUEST注入问题及Bearer Token获取咨询

一、解决REQUEST注入为null的问题 #

你当前的核心问题是注入令牌不匹配：

• 你创建了const REQUEST = new InjectionToken<Request>('REQUEST');作为注入令牌
• 但在server.ts的providers里，你提供的是字符串'REQUEST'作为标识，而非自定义的REQUEST令牌

修正步骤：

1. 在共享文件（比如src/app/core/tokens.ts）中统一定义注入令牌：

import { InjectionToken } from '@angular/core';
import type { Request } from 'express';

export const REQUEST = new InjectionToken<Request>('REQUEST');

2. 在server.ts中导入该令牌，修改providers配置：

import { REQUEST } from './src/app/core/tokens'; // 替换为你的实际文件路径

// ... 其他代码
server.get('*', (req, res, next) => {
  const { protocol, originalUrl, baseUrl, headers } = req;

  commonEngine
    .render({
      bootstrap,
      documentFilePath: indexHtml,
      url: `${protocol}://${headers.host}${originalUrl}`,
      publicPath: browserDistFolder,
      providers: [
        { provide: APP_BASE_HREF, useValue: baseUrl },
        { provide: REQUEST, useValue: req }, // 使用自定义的REQUEST令牌，而非字符串
      ],
    })
    .then((html) => res.send(html))
    .catch((err) => next(err));
});

3. 在组件/服务中保持一致的注入方式：

import { REQUEST } from './core/tokens';
import { Optional, Inject } from '@angular/core';
import type { Request } from 'express';

constructor(@Optional() @Inject(REQUEST) private request: Request) {
  if (this.request) {
    // 服务器端可正常获取请求对象，读取Cookie
    const token = this.request.cookies['BearerToken']; // 替换为你的实际Cookie名称
  }
}

二、Angular 17 SSR 中获取Cookie的常规方式 #

目前Angular 17 SSR没有内置的REQUEST导出令牌，自定义注入令牌是官方推荐的扩展方式。在服务器渲染阶段，通过注入Express的Request对象，可直接读取req.cookies或req.headers.cookie解析Cookie内容。

三、跨域API的Bearer Token传递最优方案 #

由于目标API在独立域名下，前端直接带Cookie会触发CORS限制，最优方案是利用SSR的Express服务器做反向代理：前端请求SSR服务器的/api路径，由SSR服务器转发到目标API，既避免跨域问题，又能在服务器端安全地从Cookie取Token添加到请求头。

实现步骤：

1. 安装代理依赖：

npm install http-proxy-middleware

2. 在server.ts中配置代理路由（需放在server.get('*')之前）：

import { createProxyMiddleware } from 'http-proxy-middleware';

server.use('/api', createProxyMiddleware({
  target: 'https://your-api-domain.com', // 替换为你的API域名
  changeOrigin: true,
  pathRewrite: { '^/api': '' }, // 若目标API不需要/api前缀，可通过此配置移除
  onProxyReq: (proxyReq, req, res) => {
    // 从请求Cookie中提取Token并添加到代理请求头
    const token = req.cookies['BearerToken'];
    if (token) {
      proxyReq.setHeader('Authorization', `Bearer ${token}`);
    }
  },
}));

3. 前端API请求直接指向SSR服务器的/api路径：

this.http.get('/api/users'); // 会被自动转发到https://your-api-domain.com/users

此方案既规避了CORS问题，又避免了前端暴露敏感Token信息，是SSR场景下跨域API调用的标准实践。

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