如何在 Typescript 和 Angular 2 中向 http.get 或 http.post 添加标头？

Question

getHeroes (): Observable<Heros[]> {
    return this.http.get(this.heroesUrl)
      .map(this.extractData)
      .catch(this.handleError);
  }

在哪里添加标题以及如何添加？寻找一个简单的例子。

Answer 1

您可以使用 HTTP 键/值对字典定义一个 Headers 对象，然后将其作为参数传递给

http.get()

和

http.post()

，如下所示：

const headerDict = {
  'Content-Type': 'application/json',
  'Accept': 'application/json',
  'Access-Control-Allow-Headers': 'Content-Type',
}

const requestOptions = {                                                                                                                                                                                 
  headers: new Headers(headerDict), 
};

return this.http.get(this.heroesUrl, requestOptions)

或者，如果是 POST 请求：

const data = JSON.stringify(heroData);
return this.http.post(this.heroesUrl, data, requestOptions);

从 Angular 7 及更高版本开始，您必须使用

HttpHeaders

类而不是

Headers

：

const requestOptions = {                                                                                                                                                                                 
  headers: new HttpHeaders(headerDict), 
};

Answer 2

确保声明的 HttpHeaders 不包含空值。

    this.http.get('url', {headers: new HttpHeaders({'a': a || '', 'b': b || ''}))

否则，如果您尝试向 HttpHeaders 添加空值，则会出现错误。

Answer 3

我在 Angular 9 中使用了以下代码。请注意，它使用的是 http 类而不是普通的 httpClient。

1. 所以从模块中导入 headers，否则 Headers 会被 typescript headers 接口误认为并给出错误

   从“@angular/http”导入 {Http, Headers, RequestOptionsArgs };

2. 并在您的方法中使用以下示例代码并将其分解 为了更容易理解。

   let customHeaders = new Headers({ Authorization: "Bearer " + localStorage.getItem("token")});
   const requestOptions: RequestOptionsArgs = { headers: customHeaders };
   return this.http.get("/api/orders", requestOptions);
   

Answer 4

这样我就可以调用 MyService

private REST_API_SERVER = 'http://localhost:4040/abc';

public sendGetRequest() {
  const myFormData = { email: '[email protected]', password: '123' };
  const headers = new HttpHeaders();
  headers.append('Content-Type', 'application/json');

  this.httpClient.post(this.REST_API_SERVER, myFormData, {
    headers: headers,
  })
  .subscribe((data) => {
    console.log(data, myFormData, headers);
    return data;
  });
}

Answer 5

这是我从 Angular 13（2+ 和服务！）使用 RXJS 订阅的版本，设置用于以不同语言获取数据的标头，后端查找设置的“lang”标头，因此很容易适应适用于您想要发送自定义标头的任何场景。当然，您需要在服务器端对它们做一些事情。

从组件调用该服务，其参数在标头中设置一个值，该值作为函数参数传入，在本例中为“语言”。
正如您所看到的，

httpOptions

新标头刚刚添加到 GET 中，位于路径/参数之后，以逗号分隔。

myService.service.ts：

export class MyService {

  const serverUrl = 'my-site/api';  

  getSomethingById(language: string, id: string): Observable<any> {
    let httpOptions = {
      headers: new HttpHeaders({
        'lang': language,
      })
    }

    return this.httpClient.get<string>(`${this.serverUrl}/endpointname/${id}`, httpOptions).pipe(
      catchError((err) => {
        throw '1234. Request failed:' + err;
    })
  )
}

我的组件.ts

changeLanguage(selectValue: string) {
  let language = 'gb-en';
  if (selectValue === 'Spanish') {
    language = 'ca-es';
  } else if (selectValue == 'American') {
    language = 'gb-en';
  }

    // the important bit: 
  this.myService.getSomethingById(language, this.id).subscribe({
    next: (res) => {
      this.variableName = res;
    },
    error: (error) => {
      console.error('5678:', error);
    },
    complete: () => {
      this.callMyOtherFunction();
    },
  })
}

Answer 6

这个解决方案适用于 Angular 17

执行此步骤以将 http 服务用于独立组件。

1. 打开 Main.ts 文件
2. 从 Angular 公共模块导入 ProvideHttpClient，如下所示。

从'@angular/common/http'导入{provideHttpClient};

3. 在providers数组中添加provideHttpClient()。如下 bootstrapApplication(AppComponent, { 提供者：[provideHttpClient()] })

Answer 7

this.http.get('url',  headers: new HttpHeaders({ 'ApiKey': 'P@ssw0rd', 'DbName': 'MES-QTY'})})

请尝试这个..！这对我有用..！

Answer 8

如果有人面临 CORS 问题，无法在移动浏览器或移动应用程序中工作， 你可以在你的rest api存在的后端服务器中设置 ALLOWED_HOSTS = ["your host ip"] ，这里你的主机ip是外部ip来访问 ionic ，如外部： http://192.168.1.120:8100

之后在 ionic 类型脚本中使用后端服务器的 IP 进行发布或获取

在我的例子中，我使用了 django rest framwork 并启动了服务器：- python manage.py runserver 192.168.1.120:8000

并在rest api的ionic get和post调用中使用了这个ip