Encountering issues with setting headers in Angular HttpClient when receiving a response from the server, particularly when testing in Postman

When testing a call in Postman with the single header INFO set to blopp, I expected to receive a JWT token with the value passed in as sub. However, when I removed the header, the token contained an empty sub, which was the anticipated outcome.

The script I am running includes sending the headers, but the result of the call shows that the token received has an empty sub. This suggests that there may be an issue with passing in the headers correctly.

const headers = new HttpHeaders({
  "Content-Type": "application/json",
  "Accept": "application/json",
  "INFO": "blopp"
});
const options = { headers };

this.http.get<{ token: string }>(url, options)
  .subscribe(next =>  console.log(next.token));

My initial analysis indicates that there might be a problem with how the headers are being passed. It aligns with the behavior observed when deactivating headers in Postman and executing the URL without headers from the browser.

How can I ensure that the value is correctly included as a header in the request? If I am already implementing it correctly, how can I troubleshoot further without backend access (considering it works fine in Postman)?

I have carefully followed best practices related to immutability and have tested various approaches mentioned here. Additionally, I referred to the documentation for guidance.

Answer №1

After some investigation, I have identified the issue at hand. In my Angular project, I have been utilizing the proxy feature to work around CORS problems. It turns out that not all the necessary options are specified in the proxy.config.json file as mentioned by the official documentation. One key missing detail is setting changeOrigin: true, without which the headers get stripped off even if they are explicitly defined in the configuration file!

I would like to give credit to this blog post for highlighting this crucial setting.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

For an unknown reason, I am facing difficulties in using the Storage feature from @angular/fire in ANGULAR 16

Recently I started exploring Angular/Fire and decided to test out some of its features by creating a basic app. Firestore and authentication were working smoothly, but when I attempted to include Storage, an error message popped up: ERROR FirebaseError: ...

What are the appropriate method signatures to use in Aurelia's pipeline configuration?

If you want to customize your pipeline steps, you can do so by using addPipelineStep. Just remember that the step's name needs to match one of the default slots in the pipeline: authorize, preActivate, preRender, and postRender. Aurelia provides funct ...

Issue encountered with combineLatest following upgrade of rxjs from version 6.x to 7.x

Upon upgrading rxjs from version 6.6.6 to 7.4.0, an error surfaced in my combineLatest function. searchQuery = new FormControl(null); searchStatus = new FormControl<UserStatus>('ALL'); searchParams$ = combineLatest( this.searchQuery.valu ...

What is the method for activating a button when a user inputs the correct email address or a 10-digit mobile number

How can I enable a button when the user enters a correct email or a 10-digit mobile number? Here is my code: https://stackblitz.com/edit/angular-p5knn6?file=src%2Findex.html <div class="login_div"> <form action=""> <input type="text" ...

The Angular-slickgrid is encountering an issue where it is unable to access the property "hostView" as it

Hey there developers, I've been experimenting with the angular slickgrid library and attempting to incorporate the rowDetailView feature it offers. The issue I'm facing is that while I can expand the view by clicking on it, I'm unable to c ...

Angular animation triggered when a specific condition is satisfied

I am working on an animation within my Angular application @Component({ selector: 'app-portfolio', templateUrl: 'portfolio.page.html', styleUrls: ['portfolio.page.scss'], animations: [ trigger('slideInOut&apo ...

implementing a directive in an Angular 2 component

Just finished putting together a basic project with angular 2. Ran into an issue when attempting to include a directive component in the app.component - getting a red underline under the 'directives' property. Anyone out there know what's go ...

Unable to fetch the value for the property 'toString' as it is undefined

custom-filter.pipe.ts import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'customFilter' }) export class CustomFilterPipe implements PipeTransform { transform(items: any[], searchTerm: string): any { if (!sear ...

Activate the field once the input for the other field is completed

I have a form where the last name field is initially disabled. How can I make it so that the last name field becomes enabled only when the first name is inputted? <form> <label for="fname">First name:</label><br> ...

Having trouble using the 'in' operator to search for 'Symbol(StrapiCustomCoreController)' while transitioning Strapi to TypeScript

I'm in the process of converting my strapi project to typescript. I've updated all strapi packages to version 4.15.5 and converted the files to ts extension. However, upon running strapi develop, I encounter the following error: [2024-01-03 10:50 ...

The NgbTypeahead element is not able to scroll when placed within a scrollable container

Currently, I am utilizing the NgbTypeahead component from ng-bootstrap. The issue I am facing is that when I place the typeahead component within a scrollable element and proceed to scroll down, the position of the dropdown container remains unchanged. &l ...

Is there an npm module for filtering cities by country?

Looking to implement city or state selection based on country in my Angular project. Is there a suitable npm package or API that can help achieve this functionality? ...

Why should we include the '#' character in jhipster URLs?

Standard Angular applications typically do not include a '#' sign in their URLs. However, in JHipster URLs, the '#' character serves a specific purpose. Can you explain the significance of the '#' symbol in JHipster URLs and h ...

The function _path2.default.basename does not work when using convertapi within an Angular framework

I'm currently working on integrating the convertapi into my Angular 11 application by referencing the following documentation https://www.npmjs.com/package/convertapi My goal is to convert PDFs into images, However, I encountered an issue when tryi ...

Creating a custom login directive in Angular 2 and utilizing location.createComponent for dynamic

Incorporating a login system into my Angular app has been a priority for me lately. I came across a helpful resource here that outlines the process. However, I encountered an issue with the custom RouterOutlet directive as shown below: import { ElementRef ...

Loop through an enum in ion-select

How can I use ngModel to iterate through an enum with ion-select? export enum EducationLevel { ILLITERATE = "Illiterate", 1_TO_3_YEARS = "1 to 3 years", 4_TO_7_YEARS = "4 to 7 years", MORE_THAN_8_YEARS = "more than 8 years" } class Person ...

Tips for resolving this unhandled error in React TypeScript

After creating a program in React TypeScript, I encountered an uncaught error. Despite running and debugging tests and conducting extensive research on Google, I have been unable to resolve this issue on my own. Therefore, I am reaching out for assistance ...

What is the best way to retrieve organized data from a mat-table spanning multiple pages?

Is there a way to extract sorted data from the dataSource of a mat-table and save it as sortedData in order to export it to a CSV file? The dataSource has filters and pagination applied through this.dataSource.filterPredicate; this.dataSource.paginator = t ...

Get a file transfer from MVC 5 to Angular 2

After gaining experience in C# backend and ASP.Net MVC, I decided to take on the challenge of learning Angular 2. While most of the experience has been positive, I have hit a roadblock with a simple file download task. Despite studying various examples on ...

What is causing Angular to consistently display the first object in the array on the child view, while the child .ts file correctly prints information from a different object?

Once a card of any object is clicked, the information of that specific object will be printed to the console. However, the child view will only display the details of the first object in the array it retrieves from. All pages are included below. A visual e ...