Angular 4 GET request with multiple Headers throws 400 bad request

Question

I am trying to do a POST request with headers to get a response. Below is the Angular code I am using for request.

const headers = new HttpHeaders({
        'Content-Type': 'text/plain',
        'Token':'$1$IGinaeBw$Z2kYO175lQ5t2H5HWCdOV1',
        'User-Id':'1'
    });

 this.http.get('http://localhost/simple-codeigniter-rest-api-master/index.php/book/', {headers:headers} )
    .map(user => {
       if (user) {
            localStorage.setItem('currentUser', JSON.stringify(user));
        }
        console.log(user);
        return user;
    });

Below is the issue I am getting in the console.

Its working fine in PSOTMAN though. Since angular version is upgrading constantly. I am not sure what's the issue.

Note: JQuery AJAX call is working fine.

POSTMAN screenshot:

It's a cors issue, No need to afraid. What kind of technolgy you are using for backend? — praveenkumar s, Jan 31 '18 at 16:18
No it isn't. Angular has a built in CORS notification. If it were a cors issue, angular would say so. — David Anthony Acosta, Jan 31 '18 at 16:19
Try to do following with headers: const headers = new Headers(); headers.append('Content-Type', 'text/plain'); let options = new RequestOptions({ headers: headers}); And try to debug the endpoint on your backend too — CREM, Jan 31 '18 at 16:20
https://angular.io/guide/http#configuring-other-parts-of-the-request — AT82, Jan 31 '18 at 16:24
If cookies are used, POSTMAN will add it automatically, and for your angular get(), you should do as fallows: const headers = new Headers(); headers.append('Content-Type', 'text/plain'); let options = new RequestOptions({ headers: headers, withCredentials: true}); — CREM, Jan 31 '18 at 16:25
I thought RequestIOptions is deprecated? I seen in angular.io. — johnie, Jan 31 '18 at 16:25
RequestOptions is used on Angular4, I have a working app that use it — CREM, Jan 31 '18 at 16:27

praveenkumar s · Answer 1 · 2018-01-31T16:46:39.517

-1

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

 constructor(private http: Http) {
       
 }
 
     const headers = new Headers();
        headers.append('Content-Type', 'text/plain');
        headers.append('User-Id', `$1$IGinaeBw$Z2kYO175lQ5t2H5HWCdOV1`);
        headers.append('Token', `1`);


       const options = new RequestOptions({headers: headers});
       this.http.get(
           "http://localhost:3000/contacts",
           options
       ).subscribe();

There is a possible solution for you:

Check input of headers and Content type (application/json,..)

edited Jan 31 '18 at 16:46

answered Jan 31 '18 at 16:24

praveenkumar s

325
4
16

How to check. I am not sure how to do that – johnie Jan 31 '18 at 16:26
Share me the screen of working postman, just give me the image – praveenkumar s Jan 31 '18 at 16:28
1

const headers = new Headers(); headers.append('Content-Type', 'application/json'); – CREM Jan 31 '18 at 16:29
You need to know exactly what you send and what you receive, I struggled with same thing one time, and I can assure you with post() you will suffer more. – CREM Jan 31 '18 at 16:37
https://stackoverflow.com/questions/44739745/angular-4-doesnt-include-headers-to-http-request – praveenkumar s Jan 31 '18 at 16:42
@praveenkumars I added postman screenshot in question. Do you get any idea? – johnie Jan 31 '18 at 16:42
@johnie I send u a link which consist the right ans for u, I modified the ans for you – praveenkumar s Jan 31 '18 at 16:43
I am getting this error when using this requestOtions : const options = new RequestOptions({headers: headers}); Argument of type '{ headers: Headers; }' is not assignable to parameter of type 'RequestOptionsArgs'. Types of property 'headers' are incompatible. – johnie Jan 31 '18 at 16:46
this was a working example of mine. And did u add this "import {Http, Headers, RequestOptions} from '@angular/http'; " in top – praveenkumar s Jan 31 '18 at 16:48
Now am getting the error in options in this line return this.http.get('http://localhost/simple-codeigniter-rest-api-master/index.php/book/', options ) as Argument of type 'RequestOptions' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: Ht...'. – johnie Jan 31 '18 at 16:54
Depending on Backend you use. Example in my case .NET core, i needed to AllowAnyHeader() – CREM Jan 31 '18 at 16:59
@praveenkumars Still seeing the same issue in options. in the line this.http.get( "http://localhost/simple-codeigniter-rest-api-master/index.php/book/", options ) – johnie Jan 31 '18 at 17:08

score -1 · Answer 2 · answered Jan 31 '18 at 17:05

-1

Just try this one,

Add import in top,

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

Add in constructor -> private http: Http

 var headers = new Headers();
    headers.append('Content-Type', 'text/plain');
    headers.append('user_id', '3');
    headers.append('Token', '2313131313');
    this.http.get('your api url', {headers: headers})
      .subscribe(
        (response: Response) => {
          let result = response.json();
        }
      );

This will work for you think so

answered Jan 31 '18 at 17:05

praveenkumar s

325
4
16

If this not work for you, then you have to solve it in your php CORS handler – praveenkumar s Jan 31 '18 at 17:06
When I am adding Http in construct am getting an error as : taticInjectorError(AppModule)[AuthService -> Http]: If it's a CORS error How its working in JQuery then. – johnie Jan 31 '18 at 18:14
I think Http is deprecated. You are providing me with an old solution. – johnie Jan 31 '18 at 18:19
1

@johnie try don't send 'Content-Type': 'text/plain' in the header – Eliseo Jan 31 '18 at 19:57

Angular 4 GET request with multiple Headers throws 400 bad request

2 Answers2