Is Angular 4 failing to set headers properly or is Express.js searching in the wrong place?

Question

Is Angular 4 failing to set headers properly or is Express.js searching in the wrong place?

When interacting with an Express.js API, I encountered a issue regarding the handling of auth tokens. The problem arose when sending the token in the request headers using Angular 4 compared to Postman. In Postman, setting the header named 'Authorization' worked perfectly. However, when trying to send it with Angular 4 like this:

const headers = new HttpHeaders()
  .set('Content-Type', 'application/json')
  .set('Authorization', `${token}`);
this.http.get<Response>(`${this.apiURL}dashboard/`, { headers: headers })
  .subscribe(res => console.log(res));

Upon logging the headers object, everything appeared to be correctly set. But attempting to retrieve the token in my express route using:

const token = req.get('Authorization');

always resulted in 'undefined'. It raised the question: What is angular doing differently from postman? https://i.stack.imgur.com/SorQA.png

Here is the logged result when trying to extract the token: https://i.stack.imgur.com/9PriP.png

Postman continues to work flawlessly: https://i.stack.imgur.com/BR0Vf.png

https://i.stack.imgur.com/X09IE.png

javascript angular typescript express http-headers

Answer 1

Answer №1

HttpHeaders can't be changed once they're created. More information can be found at https://angular.io/api/common/http/HttpHeaders To set headers, follow this example:

let headers = new HttpHeaders();
headers = headers.set('Authorization', 'token');

Answer 2

HttpHeaders can't be changed once they're created. More information can be found at https://angular.io/api/common/http/HttpHeaders To set headers, follow this example:

let headers = new HttpHeaders();
headers = headers.set('Authorization', 'token');

Answer 3

Answer №2

Here is a guide on how to set headers for different Angular versions:
For Angular versions prior to 5

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

        // inside your Class
        headers = new Headers({
                "Content-Type": "application/json",
                "Accept": "q=0.8;application/json;q=0.9",
                "Authorization": "token"
        });
        options = new RequestOptions({ headers: this.headers });

Make sure to include `this.options` in your http request.

For Angular version 5 and above

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

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

Now when making an http request, remember to pass along `httpOptions`.

Answer 4

Here is a guide on how to set headers for different Angular versions:
For Angular versions prior to 5

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

        // inside your Class
        headers = new Headers({
                "Content-Type": "application/json",
                "Accept": "q=0.8;application/json;q=0.9",
                "Authorization": "token"
        });
        options = new RequestOptions({ headers: this.headers });

Make sure to include `this.options` in your http request.

For Angular version 5 and above

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

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

Now when making an http request, remember to pass along `httpOptions`.

Answer 5

Answer №3

After some investigation, I discovered a solution that differs from the instructions in the express.js documentation. Instead of using req.get('Authorization'), using req.headers['Authorization'] proved to be the perfect solution.

Answer 6

After some investigation, I discovered a solution that differs from the instructions in the express.js documentation. Instead of using req.get('Authorization'), using req.headers['Authorization'] proved to be the perfect solution.

Is Angular 4 failing to set headers properly or is Express.js searching in the wrong place?

Answer №1

Answer №2

Answer №3

Similar questions

How can I retrieve the length of an array in vuejs?

Can someone please explain how I can extract and display information from a database in separate text boxes using Angular?

Guide to populating a full calendar using JSON information

Adjusting the minimum value on a textfield with JQuery Validate plugin in real-time

Navigating through ionic2 with angularjs2 using for-each loops

Is it feasible to link an Angular property value to the value of an HTML data attribute?

Steps to run the node application on a temporary different port:

Utilizing p5 SVG for interactive graphics in a web application with a React front-end and an Express back-end

Troubleshooting: Why is my console.log not working in JavaScript

Solving the challenges of creating a product index with JSON array using a combination of PHP, Javascript, and JSON

Can angular and grunt support multiple run blocks simultaneously?

Automatically generate sitemap with Node.js and Express for a seamless crawling experience

Unpredictable hues in a headline

"Enhance Your Website with Slider Swipe Effects using CSS3 and

Exploring Angular Testing: Unraveling Chained HTTP Requests with the Power of rxjs

Instructions for inserting <tr></tr> after every fourth iteration of <td></td> in the loop

Compilation with Webpack and Postcss failed due to the inability to locate the scss file within the library in node_modules

Can you help me streamline the code for the Sign Up Form app using React and jQuery?

The issue with JQGrid: Inaccurate selection of drop down value when edit type is set to 'select'

Angular 2 FormArray validation based on conditions