What could be causing my Angular 7 header to be unresponsive?

Question

What could be causing my Angular 7 header to be unresponsive?

I am facing issues with my http, header, and RequestOption in the API. I am working with Angular 7.1 and have tried various methods to resolve the problem without success.

The error message I am receiving is:

The token is not being passed in the header

This is the code snippet that I am currently using:

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

@Injectable({
    providedIn: 'root'
})
export class UrlrequestService {
    public headers = new Headers({ 'Content-Type': 'application/json'});
    API:any = "http://api-url";
    constructor(public http: Http) { }

    get(url) {  
        this.headers.set('Authorization','Token  '+localStorage.getItem('token'))
        let options = { headers: this.headers };
        console.log(options)
        return this.http.get(this.API+url,options);
    }

angular typescript angular7

Answer 1

Answer №1

When working with Angular 7, remember to import HttpClient and HttpHeaders from @angular/common/http. To pass the token, make sure to use Bearer. Here's an example of how you can do this:

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

// ...

httpOptions;
api_path:any = "http://api-url";

constructor(public http: Http) {}


// ...
this.httpOptions = {
  headers: new HttpHeaders({
  'Content-Type':  'application/json',
  'Authorization': 'Bearer ' + localStorage.getItem('token')
  })
};

Answer 2

When working with Angular 7, remember to import HttpClient and HttpHeaders from @angular/common/http. To pass the token, make sure to use Bearer. Here's an example of how you can do this:

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

// ...

httpOptions;
api_path:any = "http://api-url";

constructor(public http: Http) {}


// ...
this.httpOptions = {
  headers: new HttpHeaders({
  'Content-Type':  'application/json',
  'Authorization': 'Bearer ' + localStorage.getItem('token')
  })
};

Answer 3

Answer №2

When sending HTTP Headers, it's important to keep in mind that the tokens should be of type Bearer. Therefore, the authorization header line should look like this:

this.headers.set('Authorization','Bearer '+localStorage.getItem('token'))

Answer 4

When sending HTTP Headers, it's important to keep in mind that the tokens should be of type Bearer. Therefore, the authorization header line should look like this:

this.headers.set('Authorization','Bearer '+localStorage.getItem('token'))

What could be causing my Angular 7 header to be unresponsive?

Answer №1

Answer №2

Similar questions

Transform event binding using PrimeNG Elements and Angular

How can you properly structure chainable functions in Angular?

Distinguishing between type assertion of a returned value and defining the return type of a function

Error: The 'Store' property is not found in the '{}' type but is needed in the 'Readonly<Istore>' type. TS2741

Creating mandatory reactive form fields in Angular 11's HTML code based on conditions

Navigating through tslint: adhere to the one-variable-per-declaration rule

Building a hierarchical tree structure using arrays and objects with Lodash Js

Ways to properly exit a function

Customize the form using a custom component in react-hook-form: setting a default value

Do we truly need to demolish components that are dynamic in nature?

Issue with form control not functioning properly after implementing custom validation within the form group

A guide on dynamically displaying a component within another component using Angular2

Angular's isteven-multi-select Component: A Versatile Selection Tool

implementing an event listener in vanilla JavaScript with TypeScript

What could be the reason for encountering a Typescript ts(2345) error while trying to pass a mocked constant to .mockResolvedValue()?

Retrieve data from a URL using Angular 6's HTTP POST method

Transferring information from a service to a parent component, and subsequently passing it to a child component

Having trouble importing zone.js in Angular 14 and Jest 28

Webpack is throwing an error: TypeError - It seems like the object prototype can only be an object or null, not

Type Assertion for Optional Values in TypeScript