Send custom header with Angular 5

Question

I am trying to send a custom HTTP Header from the front end app for it to interact with the gateway. This is my angular function:

import {Http, Headers, Response, RequestOptions } from ‘@angular/http’;
getXById(id :number){
    let options = nee RequestOptions({ headers : new Headers({“X-fastgate-resource” :”resource_name}) });
    return this.http.get( http://url + “/resource”, options)

I expected to see a Header with, “X-fastgate-resource” as a key, and “resource_name” as value. What I got was this:

Request Headers:
   OPTIONS http://url HTTP/1.1
   host...
   Access-Control-Request-Headers: x-fastgate-resource

The OPTIONS request is the pre-flight request required by CORS. It should be followed up by a GET request if an appropriate status was returned. — Explosion Pills, May 30 '18 at 17:24
Yes, check your console if your request is blocked because of CORS — Mirko Acimovic, May 30 '18 at 17:28

ngChaitanya · Accepted Answer · 2018-05-31T06:19:12.723

6

You could try out something like below.

let headers = new HttpHeaders();
headers.append('X-fastgate-resource', 'Example');
let options = { headers: headers };
let apiUrl: string = 'http://url';

this.http.get(apiUrl, options);

Hope this helps

edited May 31 '18 at 06:19

answered May 31 '18 at 06:14

ngChaitanya

435
2
8

score 2 · Answer 2 · answered May 31 '18 at 06:34

Try This code:

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

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

**With params**

const url = 'yourapi';
return this.http.post(url, {
    key: value,
    key1: value1
},httpOptions);

**Without Params**

const url = 'yourapi';
return this.http.post(url,httpOptions);

score 0 · Answer 3 · answered Mar 08 '22 at 01:53

Try using the Angular Context.

Angular Context

This is the simplest way I know of passing data, usually to an interceptor

Define a Context Token - usually in the interceptor

export const MY_FILENAME = new HttpContextToken<string>(() => "");

Pass the data

const context = new HttpContext().set(MY_FILENAME, `${name}.pdf`)
return this.httpClient.post(url, pdf, {context: context})

Collect the data. Usually in the interceptor

const fileName = request.context.get(MY_FILENAME)

Send custom header with Angular 5

3 Answers3