Angular ngOnInit中HttpClient GET请求与jQuery AJAX返回数据不一致

问题背景 #

后端采用Flask框架，已配置CORS(app, supports_credentials=True)，POST请求（登录、登出）可正常工作，但针对同一后端端点的GET请求，使用Angular HttpClient在ngOnInit生命周期钩子中发起时，返回用户未认证的响应；而jQuery AJAX或Angular事件处理器（如按钮点击）触发的相同请求，能正常获取已认证用户的信息。

问题描述 #

用户已处于认证状态，但Angular HttpClient在ngOnInit中发送GET请求http://localhost:5000/api/player/info时，后端返回{"is_authenticated": false}；使用jQuery AJAX或点击Angular组件按钮触发相同请求时，可正常获取{"is_authenticated": True, "name": current_user.name}格式的正确响应。

代码示例 #

可用的jQuery AJAX代码 #

$(document).ready(function() {
    fetchPlayerInfo();
});

function fetchPlayerInfo() {
    $.ajax({
        type: "GET",
        url: "http://localhost:5000/api/player/info",
        xhrFields: {
           withCredentials: true
        },
        crossDomain: true,
        success: function(response) {
            console.log("Fetch player info successful:", response);
        },
        error: function(response) {
            console.log("Fetch player info failed:", response);
        }
    });
}

未达预期的Angular代码 #

import { Component, OnInit } from '@angular/core';
import { HttpClient } from "@angular/common/http";

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrl: './header.component.scss'
})
export class HeaderComponent implements OnInit {
  private baseUrl = 'http://localhost:5000/api';

  constructor(private http: HttpClient) {}

  ngOnInit() {
    const url = `${this.baseUrl}/player/info`;
    this.http.get<any>(url, {withCredentials: true}).subscribe((data) => {
      console.log('UserInfo:', data);
    });
  }
}

Flask后端路由代码 #

@player_bp.route('/info', methods=['GET'])
def get_player_info():
    print("Session: ", dict(session))
    print("Current User: ", current_user)
    if current_user.is_authenticated:
        player_info = {"is_authenticated": True, "name": current_user.name}
    else:
        player_info = {"is_authenticated": False}
    return jsonify(player_info)

补充观察 #

• 仅当请求在ngOnInit中发起时出现问题；
• 通过按钮点击等事件触发的请求，与jQuery AJAX效果一致，可正常获取认证信息；
• 问题与请求发起时机或组件初始化阶段的环境关联紧密。

请求头对比 #

按钮点击触发的GET请求头 #

{'Accept': 'application/json, text/plain, */*',
 'Accept-Encoding': 'gzip, deflate, br',
 'Accept-Language': 'en-GB,en-US;q=0.9,en;q=0.8,pt;q=0.7',
 'Connection': 'keep-alive',
 'Cookie': 'remember_token=176|d927b1c18bf74e8f451c9a350ad85bba5f8ce01422298fcb284e22f1056a030485d9fd203f8f5ff6561cd45a22c7288d99676b76a377c902538f00a3fa746eb4; '
           'session=ve9egd0aRoAgEFLt5QMhsne86EvHwH3eN-1jTgzO-64',
 'Host': 'localhost:5000',
 'Origin': 'http://localhost:4200',
 'Referer': 'http://localhost:4200/',
 'Sec-Ch-Ua': '"Not_A Brand";v="8", "Chromium";v="120", "Google '
              'Chrome";v="120"',
 'Sec-Ch-Ua-Mobile': '?0',
 'Sec-Ch-Ua-Platform': '"Linux"',
 'Sec-Fetch-Dest': 'empty',
 'Sec-Fetch-Mode': 'cors',
 'Sec-Fetch-Site': 'same-site',
 'User-Agent': 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, '
               'like Gecko) Chrome/120.0.0.0 Safari/537.36'}

ngOnInit中发起的GET请求头 #

{'Accept': 'application/json, text/plain, */*',
 'Connection': 'keep-alive',
 'Content-Length': '0',
 'Host': 'localhost:5000',
 'User-Agent': 'Mozilla/5.0 (Linux x64) node.js/20.11.0 v8/11.3.244.8-node.17'}

问题原因 #

从请求头差异可直接定位问题：

• ngOnInit中的请求未携带认证Cookie，且User-Agent显示为node.js环境，说明该请求是Angular Universal（服务端渲染）在服务器端发起的，而非浏览器客户端；
• 服务端渲染时，服务器没有浏览器的Cookie存储，无法携带用户的认证Cookie，因此后端判定用户未认证；
• 按钮点击的请求是在浏览器端发起的，能自动携带当前域名下的Cookie，所以请求正常。

解决方案 #

1. 仅在浏览器端发起请求 #

通过isPlatformBrowser判断当前环境，只在客户端执行请求：

import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { isPlatformBrowser } from '@angular/common';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrl: './header.component.scss'
})
export class HeaderComponent implements OnInit {
  private baseUrl = 'http://localhost:5000/api';

  constructor(
    private http: HttpClient,
    @Inject(PLATFORM_ID) private platformId: Object
  ) {}

  ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
      const url = `${this.baseUrl}/player/info`;
      this.http.get<any>(url, {withCredentials: true}).subscribe((data) => {
        console.log('UserInfo:', data);
      });
    }
  }
}

2. 服务端渲染场景下传递Cookie（可选） #

若需在服务端渲染时也获取认证数据，需在Universal的服务器配置中传递请求Cookie：

• 在server.ts中将客户端请求的Cookie注入到REQUEST对象，服务端发起请求时携带该Cookie；
• 使用TransferState将客户端的认证状态同步到服务端，避免重复发起未认证请求。

3. 延迟请求到客户端初始化完成 #

可使用ngAfterViewInit替代ngOnInit，该钩子在服务端渲染时不会执行，确保请求仅在浏览器端发起，但此方法不如isPlatformBrowser可靠。

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