You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Angular Universal SSR配置X-XSRF-TOKEN请求头遇401问题求助

Angular Universal SSR 配置XSRF Token适配Laravel Sanctum遇401问题

我正在配置Angular Universal SSR以适配XSRF token,当前遇到如下问题:
在/profile路由下,页面由服务端渲染时控制台抛出401未授权错误:

ERROR HttpErrorResponse {
  headers: HttpHeaders {
    normalizedNames: Map(0) {},
    lazyUpdate: null,
    lazyInit: [Function (anonymous)]
  },
  status: 401,
  statusText: 'Unauthorized',
  url: 'http://localhost/api/public/user',
  ok: false,
  name: 'HttpErrorResponse',
  message: 'Http failure response for http://localhost/api/public/user: 401 Unauthorized',
  error: { message: 'Unauthenticated.' }
}

浏览器会先短暂显示登录页面(由路由守卫触发),完成hydration后才显示个人资料页。我需要直接显示个人资料页,避免登录页闪烁,因此尝试在服务端请求中添加XSRF token,确保渲染时后端请求携带正确token以返回用户资料。

相关代码如下:

server.ts

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

    // @ts-ignore
    req.myCustomData = {
        xsrfToken: getXsrfToken(req.headers.cookie)
    };
    // @ts-ignore
    console.log('token on server', req.myCustomData);

    commonEngine
        .render({
            bootstrap: AppServerModule,
            documentFilePath: indexHtml,
            url: `${protocol}://${headers.host}${originalUrl}`,
            publicPath: distFolder,
            providers: [
                { provide: APP_BASE_HREF, useValue: baseUrl },
                { provide: RESPONSE, useValue: res },
                { provide: REQUEST, useValue: req }
            ],
        })
        .then((html) => res.send(html))
        .catch((err) => next(err));
});

xsrf-token.interceptor.ts

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (isPlatformServer(this.platformId)) {
        console.log(this.request.myCustomData);
        const serverReq = req.clone({
            headers: req.headers.set('X-XSRF-TOKEN', this.request.myCustomData.xsrfToken),
            withCredentials: true
        });
        return next.handle(serverReq);
    }
}

目前服务端控制台已能正常打印出token,后端使用Laravel Sanctum认证,要求Cookie包含XSRF-TOKEN且请求头携带X-Xsrf-Token才能返回200响应。请问我哪里配置出错了?当前的解决方向是否正确?Angular SSR官方文档资料较少,恳请指导。

内容的提问来源于stack exchange,提问作者Lukáš Zatloukal

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.02 18:53:13