Angular中如何通过带Access Token的请求头与API通信？附Curl示例及HttpHeaders用法疑问

嘿，我来帮你理清这个问题～首先看你给出的Curl请求，它用的是自定义请求头*****-cors来传递Access Token，但你写的Angular代码里有两个需要调整的地方，我一步步给你说明：

首先，纠正核心问题 #

你的代码里有两个关键偏差：

1. 请求头名称不匹配：Curl里用的是*****-cors，但你代码里写的是Authorization，这会导致API无法识别你的Token
2. 请求方法不匹配：Curl是GET请求，但你用了this.http.post，这会发送POST请求到API，和预期不符

正确的实现步骤 #

1. 确保导入必要模块 #

首先要在你的根模块（比如AppModule）中导入HttpClientModule，这样才能使用HttpClient和HttpHeaders：

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    // 其他模块...
    HttpClientModule
  ]
})
export class AppModule { }

2. 在服务/组件中实现请求 #

接下来在你的服务或组件里，导入HttpClient和HttpHeaders，然后按照Curl的要求构建请求：

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

@Injectable({ providedIn: 'root' })
export class BookService {
  private apiEndpoint = 'https://**********.net/api/books';

  constructor(private http: HttpClient) { }

  fetchBooks(accessToken: string) {
    // 构建请求头，注意头名称要和Curl完全一致
    const requestHeaders = new HttpHeaders({
      'Accept': 'application/json',
      'Accept-Language': 'en_US',
      '*****-cors': accessToken // 这里替换为实际的Access Token
    });

    // 发送GET请求，第二个参数是请求配置（包含headers）
    return this.http.get(this.apiEndpoint, { headers: requestHeaders });
  }
}

3. 调用这个方法 #

在组件里你可以这样调用：

import { BookService } from './book.service';

@Component({ /* 组件配置 */ })
export class BookComponent {
  constructor(private bookService: BookService) { }

  loadBooks() {
    const myAccessToken = '你的实际Token'; // 可以从localStorage或认证服务获取
    this.bookService.fetchBooks(myAccessToken)
      .subscribe({
        next: (books) => console.log('获取到的书籍:', books),
        error: (err) => console.error('请求失败:', err)
      });
  }
}

额外注意事项 #

• 如果你的Access Token是从认证流程（比如OAuth2）获取的，建议把Token存在localStorage或者专门的认证服务中，不要硬编码
• 如果API后续要求用标准的Authorization: Bearer <token>头，再调整头名称，但目前要严格匹配你给出的Curl里的自定义头
• 发送GET请求时，http.get的第二个参数是配置对象，不需要传递请求体（POST请求才需要在第二个参数传体）

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