Angular 5 - HTTP帖子

Question

我有一个后端接口，我用我的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设置，因为我在头文件对象中设置了

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

以及为什么 OPTIONS 在使用Angular 5的请求方法中提及，而不是在 POST 中提及角度1.3。

有谁知道我做错了什么？

Answer 1

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

返回this.http.post（url，calendarEvent，Options）.map（res =＆gt; res.json（））。subscribe（res =＆gt; console.log（res））;

Answer 2

OPTIONS 请求被视为一个飞行前请求，在实际请求之前发送，以检查方法是否存在。

如果发送的请求是有效请求，则会调用有效方法。

关于请求标题，您可以使用上面答案中的那个。

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

Answer 3

对于Angular5，

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

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

1. 默认情况下，'Content-Type': 'application/json'
2. 停止使用map。
3. 订阅回复并将其存储到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)); 
}