Angular is failing to return the response with the custom headers that I have

I've encountered an issue while trying to access headers from a request in Angular. Strangely, the response only includes a link: https://i.sstatic.net/hrLdy.png

Oddly enough, when I copy the request as cURL and run it, the headers are present.

Here is the request code snippet:


login(email, password): Observable<string> {
    const url = Utils.baseBackendUrl + '/login';
    const headers = new HttpHeaders({
      'Content-Type': 'application/json',
    });
    const httpOptions = {
      observe: 'response',
      // method: 'POST',
      // headers: headers,
    };
    this.http.post<any>(url, {
        user_email: email,
        user_password: password,
        locale: 'cs_CZ'
    }, {headers: headers, observe: 'response'})
      .subscribe(resp => {
          console.log(resp.headers);
      });
    return of('ahoj');
}

Answer №1

After much searching, I finally stumbled upon the perfect solution to my dilemma!

  authenticateUser(email, password): Observable<string> {
    const url = Utils.baseBackendUrl + '/login';
    const headers = new HttpHeaders({'Content-Type': 'application/json'});
    this.http.post<any>(url, JSON.stringify({'user_email': email, 'user_password': password, 'locale': 'cs_CZ'}),
      {headers: headers, observe: 'response', responseType: 'text' as 'json'})
      .subscribe(response => {
        console.log(response.headers.get('successful'));
        console.log(response.headers.get('message'));
    });
    return of('hello');
  }

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

React-table fails to show newly updated data

I am facing an issue with my react-table where real-time notifications received from an event-source are not being reflected in the table after data refresh. https://i.stack.imgur.com/q4vLL.png The first screenshot shows the initial data retrieval from th ...

What is stopping TypeScript from assigning certain properties to the HTMLScriptElement?

I'm currently working with TypeScript and React, and I'm facing an issue with a function that is meant to copy script attributes between two elements: type MutableScriptProperties = Pick< HTMLScriptElement, 'async' | 'crossO ...

Using Node.js to implement GET, POST, and DELETE functionalities

I have embarked on the journey of learning Node.js and I find myself in a state of confusion. Could you please guide me on how to construct effective HTTP requests for the following scenarios: 1) Retrieve all galleries from the gallerySchema using a GET ...

How to retrieve the HTTPClient value in Angular?

APIservice.ts public fetchData(owner: any) { return this.http.get(`${this.url}/${owner}`, this.httpOptions).pipe( catchError(e => { throw new Error(e); }) ); } public fetchDataById(id: number, byId:string, owner: any) { ...

What could be causing the Google Sign-In functionality to fail in an Angular web application?

I'm currently working on implementing Google sign-in for my web app. I've been following this tutorial here. However, I'm facing an issue where the Google sign-in button is not appearing. I would like the authentication to happen at http://l ...

Is it a never-ending cycle of subscriptions within a subscription?

I am currently facing a challenge with using multiples/forEach subscribe inside another subscribe. My goal is to retrieve a list of objects and then fetch their images based on their ID. The code I have written so far looks like this: this.appTypeService. ...

History will still store CanActive URL even if it returns false

Why does CanActive add the skipped path to history? I'm using the following guard: canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean { if (this.router.url === '/') { thi ...

How can I properly containerize an Express Gatsby application with Docker?

SOLUTION: I am currently working on a project involving an express-gatsby app that needs to be built and deployed using GitHub Actions. To deploy it on Heroku, I have learned that containerizing the app is necessary. As a result, I have created a Dockerfil ...

Enhancing Angular routing with multiple parameters

When I am using either routerLink or router.navigate, I face an issue where I have an array containing multiple values that need to be serialized into ?id=val1&id=val2. However, the problem arises when trying to set an optional route parameter as an ar ...

Chess.js TypeScript declaration file for easy implementation

Currently, I am delving into learning typescript and have taken up the challenge of crafting a declaration file for the chess.js library. However, it seems that I am struggling to grasp the concept of creating one. Whenever I attempt to import the library ...

Personalizing Dialog Title in material-ui

While delving into the world of React and Material-UI, I encountered a challenge in updating the font color in the DialogTitle component. After browsing through various resources, I came across a helpful link that suggested overriding the dialog root class ...

Obtain JSON data from a POST request

I'm trying to send a POST request: var obj = { City: 'New York', Population: 8.4 million }; var endpoint = "/api/updateCity"; $.ajax({ url: endpoint, type: 'POST', data: obj, contentType: 'application/json; charset=ut ...

Retrieving a Boolean Value from HTTPClient

In my authorization service, I am working on verifying the existence of a user. import { HttpClient } from "@angular/common/http"; import 'rxjs/Rx' @Injectable() export class AuthService { constructor( private http : HttpClient) {} reg ...

The button icon fails to display correctly on the iPhone X, despite appearing correctly in the DevTools

Recently, I designed a "Scroll to top" button for my application. During testing using Chrome and Safari DevTools, the button appeared correctly on all devices: https://i.sstatic.net/Apb8I.png However, upon opening it on an iPhone X, I noticed that the i ...

Make sure the static variable is set up prior to injecting the provider

In our Angular6 application, we utilize a globalcontextServiceFactory to initialize the application before rendering views. This process involves subscribing to get configuration from a back-end endpoint and then using forkJoin to retrieve environment app ...

Learn how to configure gulp-typescript to automatically generate individual JavaScript files for each TypeScript file within the same directory

My interest lies in utilizing the gulp-typescript module for handling typescript compilation. My goal is to set up a configuration where each typescript file translates into one javascript file in the corresponding directory, similar to how it works with t ...

Optimal method for accessing params and queryParams in Angular 2

Seeking insights on how to craft a route with information stored in its URL parameters. Here's an example of my route (app.routes.ts): {path: 'results/:id', component: MyResultsComponent}, How I navigate to the route : goToResultsPage(qu ...

Unlock hidden Google secrets within your Angular application using Google Secret Manager

Can the Google Secret Manager API be accessed with a simple API call using an API key? https://secretmanager.googleapis.com/v1/projects/*/secrets/*?key=mykey returns a 401 unauthenticated error. While the Node.js server powering the Angular app uses the c ...

What is the process for determining or managing the missing path attribute of a cookie in a Single Page Application?

According to RFC6265 In case the server does not specify the Path attribute, the user agent will utilize the "directory" of the request-uri's path component as the default value. While this concept primarily applies to the Set-Cookie prot ...

Guide to utilizing @types/node in a Node.js application

Currently, I am using VSCode on Ubuntu 16.04 for my project. The node project was set up with the following commands: npm init tsc --init Within this project, a new file named index.ts has been created. The intention is to utilize fs and readline to read ...