REST 调用适用于 axios，但不适用于 Angular 5 项目中的 HttpClient

Question

Service.ts代码

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ClientService {

  constructor(private http: HttpClient) { }

  getClients() {
    return this.http.get<any>('http://localhost:8080/admin-api/client?count=15&page=0&q=', { withCredentials: true })
  }
}

Component.ts代码

import { Component, OnInit } from '@angular/core';
import { LazyLoadEvent } from 'primeng/api'

import { ClientService } from '../../services/client.service';


@Component({
  selector: 'app-client',
  templateUrl: './client.component.html',
  styleUrls: ['./client.component.css']
})

export class ClientComponent implements OnInit {

constructor(private clientService: ClientService) { }

ngOnInit() {
    this.loading = true

    this.clientService.getClients().subscribe(data => {
      console.log(data)
    }, error => {
      console.log(error)
    })

  }
}

我在运行时得到的错误

我不明白为什么在 Angular.

中使用 axios 可以成功但使用 HttpClient 却不能成功

Answer 1

显然，Axios 在检测到 "XSRF-TOKEN" cookie 时会添加 "X-XSRF-TOKEN" header，而 Angular 中的 HttpClient 则不会。

因此您必须在发送请求时读取 "XSRF-TOKEN" cookie 的值并将其设置为 header "X-XSRF-TOKEN"。

REST 调用适用于 axios，但不适用于 Angular 5 项目中的 HttpClient

REST call works with axios but not with HttpClient in an Angular 5 project

node.js

typescript

axios

angular

angular-httpclient