Angular 请求中的通用设置 set-cookies header

Question

我有带有身份验证的角通用 SSR 应用程序。 我将身份验证令牌保存在 http cookie（set-cookies）中。 现在，当我刷新应用程序时，我首先看到未经身份验证的页面，一秒钟后它转换为经过身份验证的 state。

我知道这是因为 Universals 渲染器服务器在渲染页面时没有将令牌从 cookies 传递到 API。 那么如何强制通用服务器在经过身份验证的 state 中呈现页面？

Answer 1

Angular 通用在使用HttpClient时不传输 cookies（ github 问题）。 您可以使用拦截器手动添加它们。

拦截器.ts

import { REQUEST } from '@nguniversal/express-engine/tokens';

@Injectable()
export class CookieInterceptor implements HttpInterceptor {
  constructor(@Optional() @Inject(REQUEST) private httpRequest) 
  {
  }

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    if (this.httpRequest) //If optional request is provided, we are server side
    {
      req = req.clone(
      { 
        setHeaders: 
        {
            Cookie: this.httpRequest.headers.cookie
        }
      });
    }
    return next.handle(req);
  }
}

您可能会收到以下错误

拒绝设置不安全的 header 'Cookie'

此评论中建议的一种可能的解决方法是绕过 xhr2 对不安全标头的默认安全行为

对于 angular 7（我猜是 8），以下工作

服务器.ts

import * as xhr2 from 'xhr2';
xhr2.prototype._restrictedHeaders = {};

我还没有测试过 angular 9，但我认为你需要一个不同的解决方法来解决不安全的 cookie header

// activate cookie for server-side rendering
export class ServerXhr implements XhrFactory {
  build(): XMLHttpRequest {
    xhr2.prototype._restrictedHeaders.cookie = false;
    return new xhr2.XMLHttpRequest();
  }
}

@NgModule({
  ...
  providers: [{ provide: XhrFactory, useClass: ServerXhr }],
  ...
})
export class AppServerModule {}