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
– Explosion Pills, Commented May 30, 2018 at 17:24
Yes, check your console if your request is blocked because of CORS — Mirko Acimovic
– Mirko Acimovic, Commented May 30, 2018 at 17:28

ngChaitanya · Accepted Answer · 2018-05-31 06:19:12Z

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, 2018 at 6:19

answered May 31, 2018 at 6:14

ngChaitanya

4352 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vishal Maru · Accepted Answer · 2018-05-31 06:34:26Z

2

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);

answered May 31, 2018 at 6:34

Vishal Maru

5092 silver badges8 bronze badges

Comments

Interlated · Accepted Answer · 2022-03-08 01:53:09Z

0

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)

answered Mar 8, 2022 at 1:53

Interlated

6,02610 gold badges54 silver badges88 bronze badges

Collectives™ on Stack Overflow

Send custom header with Angular 5

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related