Angular 5 - HTTP 发布答案

【问题标题】：Angular 5 - HTTP postAngular 5 - HTTP 发布
【发布时间】：2018-03-19 20:44:28
【问题描述】：

我有一个后端接口，我用我的 Angular 1.3 应用程序调用它没有问题。使用我的 Angular 5 应用程序，我得到一个 HTTP 403（禁止）我面对一张图片中的请求参数（左侧为Angular 1.3，右侧为Angular 5）：

我的 Angular 5 代码如下所示：

createDate(calendarEvent: CalendarEvent) {
    let serialDates = false;
    let calendarEventSerialDateType = 'NO_SERIAL_DATE';
    let serialEndDate = this.utilService.convertDateToDateString(new Date());
    let url: string = environment.apiEndpoint + 'calendarevents/calendarevent/' + serialDates + '/' + calendarEventSerialDateType + '/' + serialEndDate + '/';
    let headers = new Headers({ 'Content-Type': 'application/json', 'X-AUTH-TOKEN': this.authService.getToken()});
    let options = new RequestOptions({ headers: headers });
    return this.http.post(url, calendarEvent, options).map(res => res.json()).subscribe(res => console.log(res));

}

我有例如不知道为什么 X-AUTH-TOKEN 没有用 Angular 5 设置，因为我用

在 headers 对象中设置了它

let headers = new Headers({ 'Content-Type': 'application/json', 'X-AUTH-TOKEN': this.authService.getToken()});

以及为什么在使用 Angular 5 的请求方法中提到 OPTIONS 而不是像 Angular 1.3 那样的 POST。

有人知道我做错了什么吗？

【问题讨论】：

标签： http angular5

【解决方案1】：

let Options = {
     headers: new HttpHeaders({
    'Content-Type': 'application/json'
  })
};

return this.http.post(url, calendarEvent, Options).map(res => res.json()).subscribe(res => console.log(res));

【讨论】：

@quma 否则，创建一个服务=> 创建一个文件名，.service.ts - 在里面执行您的 API 调用 =>如果您想了解更多信息，请告诉我。

【解决方案2】：

OPTIONS请求被认为是一个pre-flight请求，它在实际请求之前发送以检查方法的存在。

如果发送的请求是合法的，就会调用合法的方法。

关于请求头，你可以使用上面答案中的那个。

 let Options = {
     headers: new HttpHeaders({
    'Content-Type': 'application/json'
  })
    };

【讨论】：

【解决方案3】：

对于 Angular5，

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

const headers = new HttpHeaders().set('X-AUTH-TOKEN', this.authService.getToken());

默认为'Content-Type': 'application/json'
停止使用map。
订阅响应并将其存储到 Observable 以供进一步访问。

示例：

createDate(calendarEvent: CalendarEvent) {
  let serialDates = false;
  let calendarEventSerialDateType = 'NO_SERIAL_DATE';
  let serialEndDate = this.utilService.convertDateToDateString(new Date());
  let url: string = environment.apiEndpoint + 'calendarevents/calendarevent/' + serialDates + '/' + calendarEventSerialDateType + '/' + serialEndDate + '/';
  let headers = new HttpHeaders().set('X-AUTH-TOKEN', this.authService.getToken());
  return this.http.post(url, calendarEvent, {headers: headers}).subscribe(res => console.log(res)); 
}

【讨论】：