14

I am trying very simple angular 4 http request. When i check chrome developer tools, i couldn't see http headers.

const headers: Headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Authorization', 'Bearer: 123213');
this.http.post('https://127.0.0.1:502', JSON.stringify(token), {headers: headers}).subscribe();

am i missing something?

georgeawg
  • 48,608
  • 13
  • 72
  • 95
Bilal Yasar
  • 947
  • 2
  • 11
  • 24

4 Answers4

24

Starting with angular@5.x. the @angular/http module is deprecated with all its classes. Now angular/common/http should be used. Read here for more.

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

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    'Authorization': 'my-auth-token'
  })
};

this.http.post(
   "http://localhost:3000/contacts",
   JSON.stringify({id: 4, name: 'some'}),
   httpOptions 
).subscribe();

For the older versions, you can do it like this:

import {Http, Headers, RequestOptions} from '@angular/http';

export class AppComponent {
    constructor(private http: Http) {
        const headers = new Headers();
        headers.append('Content-Type', 'application/json');
        headers.append('authentication', `hello`);

       const options = new RequestOptions({headers: headers});
       this.http.post(
           "http://localhost:3000/contacts",
           JSON.stringify({id: 4, name: 'some'}),
           options
       ).subscribe();

You have to ensure that you're importing correct objects from the @angular/http:

import {Http, Headers, RequestOptions} from '@angular/http';

If you still don't see your headers, it's also possible that the server you're using doesn't allow them. When a browser makes a request to the other origin, it sends access-control-headers-request header to check if server allows custom header. If your server is not configured to allow custom headers, you will not see them in the consequent requests.

Max Koretskyi
  • 101,079
  • 60
  • 333
  • 488
  • 3
    According to [docs on Headers](https://angular.io/api/http/Headers), the class is deprecated and it's suggested to use the [class *HttpHeaders*](https://angular.io/api/common/http/HttpHeaders). I still can't make it work, though (something with the syntax that I'm too ignorant about) so if you would like to update your answer with the non-obsolete class, it would be heavily appreciated. – DonkeyBanana Jan 16 '18 at 09:57
  • 1
    @DonkeyBanana, yes, the `@angular/http` module is deprecated with all its classes. Now `@angular/common/http` should be used. I'll add to the answer. Thanks – Max Koretskyi Jan 16 '18 at 10:13
  • Headers is defunct. Use HttpHeaders instead. – Jhourlad Estrella Oct 30 '18 at 05:34
19

If you use HttpClient instead Http your code should looks like this: 

login(credintials: Authenticate): Observable<any> {

    const body = {
        username: credintials.username,
        password: credintials.password,
        grant_type: 'password',
        client_id: credintials.client_id
    };
    const headers = new HttpHeaders()
        .set('Content-Type', 'application/x-www-form-urlencoded')
        .set('Authorization', 'Basic loremlorem');

    return this.http.post(`${baseUrl}/uaa/oauth/token`,
        body,
        {
            headers: headers
        }
    );
}

If your params is optional you should append params like this:

let params: HttpParams = new HttpParams();
if (param) {
  params = params.append( 'page', param.page );
}

Source code looks like:

/**
 * Construct a new body with an appended value for the given parameter name.
 */
append(param: string, value: string): HttpParams;
Игорь Демянюк
  • 1,197
  • 11
  • 13
0

Put this

constructor(private http: Http) {
            this.headers = new Headers();
            this.headers.append('content-type', 'application/json');
    }

and inside the method this

return this.http.post(url, jsonData, this.headers).map((resp: Response) => resp.json());
alehn96
  • 1,363
  • 1
  • 13
  • 23
0
import { HttpClient,HttpHeaders } from '@angular/common/http';

const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded' }) };

"For httppost"

this.httpClient.post('http://localhost/rajat/ajax/contact_query_submit/',{name:name,email:email,phone:phone,message:message},httpOptions)
.subscribe(data => {
  console.log(data);
});

"For receive post data you have to do this below mentioned"

$postdata = file_get_contents("php://input");
        $_POST = json_decode($postdata,TRUE);
        $addArr = array(
            'name' => $this->input->post('name'),
            'email' => $this->input->post('email'),
            'phone' => $this->input->post('phone'),
            'message' => $this->input->post('message'),
            'created' => time()
        );
Rajat Biswas
  • 23
  • 5