Angular 5 - HTTP post

Question

I have a backend interface which I invoke with my Angular 1.3 application without problems. With my Angular 5 application I get an HTTP 403 (Forbidden) I faced the request parameters in an picture (Angular 1.3 at the left side, Angular 5 at the right side):

My Angular 5 code looks like this:

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));

}

I have e.g. no idea why X-AUTH-TOKEN is not set with Angular 5 because I set it in the headers object with

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

and why OPTIONS is mentioned at Request Method with Angular 5 instead of POST like with angular 1.3.

Does anyone have any idea what I am doing wrong?

Sangeeth John · Accepted Answer · 2018-03-01 13:12:07Z

4

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));

edited Mar 1, 2018 at 13:12

answered Mar 1, 2018 at 7:05

Sangeeth John

3301 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sangeeth John Over a year ago

@quma otherwise, create a service=> creating a file name as,<filename>.service.ts - Inside that perform your API call =>if you want to know more let me know.

Supun Dharmarathne · Accepted Answer · 2018-03-03 15:56:00Z

0

OPTIONS request is considered as a pre-flight request, which is sent before the actual request to check the existence of method.

If the request sent is a valid one, it will call the valid method.

And regarding the request header, you can use the one in the above answer.

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

edited Mar 3, 2018 at 15:56

answered Mar 2, 2018 at 13:25

Supun Dharmarathne

1,1481 gold badge10 silver badges19 bronze badges

Comments

Deepak swain · Accepted Answer · 2018-03-19 12:44:28Z

For Angular5,

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

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

By default, 'Content-Type': 'application/json'
Stop using map.
Subscribe the response and store it to Observable for further access.

Example:

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)); 
}

Collectives™ on Stack Overflow

Angular 5 - HTTP post

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related