CODEWITHSUNDEEP
httpangular5
quma
quma

Reputation: 5733

Angular 5 - HTTP post

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

Angular5 vs Angular1.3

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?

Upvotes: 0

Views: 2258

Answers (3)

Deepak swain
Deepak swain

Reputation: 3694

For Angular5, 

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

const headers = new HttpHeaders().set('X-AUTH-TOKEN', this.authService.getToken());
  1. By default, 'Content-Type': 'application/json'
  2. Stop using map.
  3. 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)); 
}

Upvotes: 0

Supun Dharmarathne
Supun Dharmarathne

Reputation: 1148

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

Upvotes: 0

Sangeeth John
Sangeeth John

Reputation: 330

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

Upvotes: 4

Related Questions