How to set headers in angular 2

Question

I have the follwing headers

var headers = new HttpHeaders();            
    headers.set('Content-Type', 'application/json');
    headers.set('X-Quikr-App-Id', '1087');
    headers.set('X-Quikr-Token-Id', '785582933');
    headers.set('X-Quikr-Signature-v2', '86742d91e19bc30cdd923bf6a84194c133570659');
    headers.set('Access-Control-Allow-Origin', '*');


this.http.get('https://api.quikr.com/public/adsByLocation?lat=28.64649963&lon=77.22570038&from=0&size=1', {
                     headers:headers })
  .subscribe(

This is throwing an exception, whereas when I do the same thing from Postman it's working. The strange thing here is, when I run this from my app, I am getting error in options only, i.e not even my get call is called, and I can't see any headers in my response.
Can anyone please suggest me help.Thanks.

  Request URL:https://api.quikr.com/public/adsByLocation?lat=28.64649963&lon=77.22570038&from=0&size=1
Request Method:GET
Status Code:401 Unauthorized
Remote Address:104.120.157.164:443
Referrer Policy:no-referrer-when-downgrade
Response Headers
view source
Connection:keep-alive
Content-Length:12
Content-Type:text/plain; charset=utf-8
Date:Thu, 01 Feb 2018 07:20:20 GMT
WWW-Authenticate:xBasic realm="fake"
Request Headers
view source
Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Host:api.quikr.com
Origin:http://localhost:4200
Pragma:no-cache
Referer:http://localhost:4200/
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.73 Safari/537.36

Please read and follow the following docs before posting your next question: https://stackoverflow.com/help/how-to-ask, and https://stackoverflow.com/help/mcve. Specifically, you need to state your *exact* error messages. — SherylHohman, Feb 01 '18 at 07:03

score 1 · Answer 1 · answered Feb 01 '18 at 07:46

Don't separate the set, just

var headers = new HttpHeaders()
    .set('Content-Type', 'application/json');
    .set('X-Quikr-App-Id', '1087');
    .set('X-Quikr-Token-Id', '785582933');
    .set('X-Quikr-Signature-v2', '86742d91e19bc30cdd923bf6a84194c133570659');
    .set('Access-Control-Allow-Origin', '*');

HttpHeaders is "inmutable", others ways to do

var headers = new HttpHeaders();            
headers=headers.set('Content-Type', 'application/json');
headers=headers.set('X-Quikr-App-Id', '1087');
       ...
//Or 
var headers=new HttpHeaders({
   'Content-Type':'application/json',
   'X-Quikr-App-Id', '1087',
   ...
})

Andrew Sithole · Answer 2 · 2018-02-01T06:50:55.400

0

Referencing the Angular 2 Angular Http Guide @angular/http has been deprecated, and @angular/common/http should be the one you are using in your Angular 2 App. Because if you do not specify http headers the default request will be sent as Content-Type text/plain, How you modify the http headers is to:

import { HttpClient, HttpHeaders } from '@angular/common/http';  
.....
const req = this.http.get('https://api.quikr.com/public/adsByLocation?lat=28.64649963&lon=77.22570038&from=0&size=1',
                        JSON.stringify(object),
                        {
                         headers:new HttpHeaders()
                         .set('Content-Type','application/json' 
//other headers here
                         }).subscribe();

edited Feb 01 '18 at 06:50

answered Feb 01 '18 at 06:45

Andrew Sithole

116
5

,it seems working but the problem is I am geeting cores error and 401. i.e. Failed to load https://api.quikr.com/public/adsByLocation?lat=28.64649963&lon=77.22570038&from=0&size=1: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 401. – PSPK Feb 01 '18 at 06:59
can you please suggest – PSPK Feb 01 '18 at 06:59
You need to add the CORS header to the API you are hitting – Andrew Sithole Feb 01 '18 at 07:03
Are you using a PHP or C# api? – Andrew Sithole Feb 01 '18 at 07:04
Please mark my answer as correct if it solved the first problem – Andrew Sithole Feb 01 '18 at 07:08
Edited my cod ,please check it – PSPK Feb 01 '18 at 07:11
I've seen the error. However, I think its now on the server you are hitting with the request which is why I asked for the language you used to create the API. CORS issues require the server to state whether or not to take requests from various sources and I think thats where the issue is. Not in the front end anymore. Please paste the error you are getting in the options here – Andrew Sithole Feb 01 '18 at 07:17
I have n ide about the backend but client is typescript(Angular 4). – PSPK Feb 01 '18 at 07:23
Edited my question.Please check. – PSPK Feb 01 '18 at 07:29

How to set headers in angular 2

2 Answers2