Angular 2 POST header error

Question

I cannot get my header on POST request to work, I've tried pretty much every solution people posted on the internet.

here is the code:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders} from '@angular/common/http';
import { Observable } from "rxjs";
import { Headers } from '@angular/http';

@Injectable()
export class APIService {
    constructor(private http:HttpClient) { }

    function(url, var1, var2):Observable<any>{

        let data = {
            "status": var1,
            "duration": var2
      };

    let message = JSON.stringify(data );

    return this.http.post(url, message, <HELP>);
}

here are the things I've tried:

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

const requestOptions = {
  headers: new Headers(headerDict),
};
return this.http.post(url, message, requestOptions );

and

return this.http.post(url, message, {headers:{'Content-Type': 'application/json'}});

and

//added above -> import { Headers, RequestOptions } from '@angular/http';

const headers = new Headers({ 'Content-Type': 'application/json' });
const options = new RequestOptions({ headers: headers });
return this.http.post(url, message, options );

and

var headers = new Headers();
headers.append('Content-Type', 'application/json');
let options = new RequestOptions({ headers: headers });
return this.http.post(url, message, options );

and some others I don't remember. None of them worked. I've been stuck for hours. Most of the errors are:

"Argument of type 'RequestOptions' is not assignable to parameter of type '{ headers?: HttpHeaders; observe?: "body"; params?: HttpParams; (...) "

Types of property 'headers' are incompatible

Type 'Headers' is not assignable to type 'HttpHeaders'.

Property 'headers' is missing in type 'Headers'.

When I print "message" the output is what I want, but it won't get posted without the header (error 415 when I try posting on my API) and the only logical explanation is that the missing header is making it not work, but with a header it won't compile. Please help?

FYI: OS = Windows. I never had a problem before with my gets, only with this post attempt. I don't know if the OS may influence this so I thought it was better to let you know.

Note that Headers from @angular/http and HttpHeaders from @angular/common/http are not the same thing. This should be clear: "Type 'Headers' is not assignable to type 'HttpHeaders'." In general, pick one client and stick to it. — jonrsharpe
Hi @jonrsharpe, at first i had only HttpHeaders from @angular/common/http. With the errors and internet solutions I added the Headers from @angular/http. With your suggestion, I took out the HttpHeaders import. Oddly enouth, the error is still: Types of property 'headers' are incompatible., Type 'Headers' is not assignable to type 'HttpHeaders'., Property 'headers' is missing in type 'Headers'.. — Laura Martins
But taking out the HttpClient and inserting HTTP it compiles :) won't run for "Error: No provider for Http!" but I'll search it now. It's one step forward, at least it is compiling! Thank you :) — Laura Martins
"With your suggestion, I took out the HttpHeaders import." - that's the opposite of what I was suggesting. It's unclear why it was surprising to you that you'd get the same error, given that you continued to do the same thing. "won't run for "Error: No provider for Http!"" - presumably because you have the HttpClientModule, not the HttpModule, in your module imports. I'd strongly recommend reading the documentation: angular.io/guide/http — jonrsharpe

Yaser Yaser · Accepted Answer · 2017-12-06T00:51:43

Try this:

return this.http.post(url, message, {
   headers: new HttpHeaders().set('Content-Type', 'application/json')
                             .set('Accept', 'application/json')
                             .set('Access-Control-Allow-Headers', 'Content-Type')
});

Angular 2 POST header error

1 Answers