3

I have a Angular (version 8) application which is going to redirect / call an external url (not API) with HEADERS.

I am able to call / redirect the external url but not able to send any HEADERS.

The thing is once I am able to LOGIN successfully, I have to send the Authentication token in header to the external url while redirecting.

Please let me know how can I send auth token while redirecting to external url.

I have gone through the below url which helps me to redirect to external url but headers are not getting sent.

Angular 6 Redirect to external url using POST

Surya
  • 604
  • 1
  • 6
  • 25

2 Answers2

0

I think the way you'd do it is to send the headers through an XHR request. Then if you wanted to reload afterwards you could. But the header transmission would happen first

this.http
.post('api/login', body, {
  headers: new HttpHeaders({
    'Authorization': 'my-auth-token',
    'x-header': 'x-value'
  })
}).subscribe(() => window.location.href='https://some-other-website.com')
Kinglish
  • 23,358
  • 3
  • 22
  • 43
  • I tried with this but the post call is getting failed. Status Code: 404 Not Found.. Also tried with GET but same error.. the url which I am accessing is not API url, it is just normal url (api gateway) which redirects to another web page with the auth token which I am getting after Login. – Surya Jun 28 '21 at 06:41
  • I tried with this and it is working but the headers are not getting sent... const myform = document.createElement('form'); myform.method = 'GET'; myform.action = url; myform.style.display = 'none'; myform.append('tokeninfo', localStorage.getItem('token')); document.body.appendChild(myform); myform.submit(); – Surya Jun 28 '21 at 06:43
  • None of that code made sense to me, sorry. on form submit, send the http request above to the URL of your api with the headers (whatever they need to be) formatted the way your API requires them. All that form stuff you put in your comment is irrelevant to the question – Kinglish Jun 28 '21 at 06:52
  • Sorry. I meant to say, I tried with the suggestions you gave first, but getting 404 Error. That's why I tried another way mentioned in https://stackoverflow.com/questions/53472103/angular-6-redirect-to-external-url-using-post That code snippets I posted in the comments..Sorry for misleading you... – Surya Jun 28 '21 at 06:58
  • A 404 error means you are sending to the wrong URL. The URL needs to be changed – Kinglish Jun 28 '21 at 06:59
  • ok..Now the API call is successful but it is reloading the same current page instead of going to another external website – Surya Jun 28 '21 at 09:12
  • ok, i updated my answer to show where that goes. – Kinglish Jun 28 '21 at 09:15
  • Now it is trying to redirect to the other website but all the headers are lost which I sent in the first http call, so the page is not opening. – Surya Jun 28 '21 at 09:59
0
  1. You create the headers.

e.g: JSW, if you have your token in localStorage, as "current_user" token:

import { HttpHeaders } from '@angular/common/http';
....
const headers = new HttpHeaders()
  .append("Authorization", "Bearer " + localStorage.getItem("current_user")["token"])
  .append("Content-type", "application/json");

  1. You define your httpOptions.

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

or more tidy (if you already have declared the const headers before

const httpOptions = {
  headers
};
  1. You make your redirect / call to the external url.
    const externalUrl = 'http://....';
    const dataToPut = 'Usually, it will be an object, not a string';
    
    this.http.post<Hero>(this.externalUrl, dataToPut , httpOptions)
        .pipe(
          catchError(this.handleError('post error: ', dataToPut ))
        );

Anyway, once you know how to do it, the best way to send the Authentication token in header is throught an INTERCEPTOR, that is going to intercept all your http calls and insert in the headers the Authentication parameters: https://angular.io/guide/http#intercepting-requests-and-responses

P.S: I strongly recommend you to read this 2 official documentation pages for further examination... is all there, a more detailed information

https://angular.io/guide/http

https://angular.io/guide/http#adding-headers

[Angular] [http] [headers] [interceptor]

Juan Vicente Berzosa Tejero
  • 2,786
  • 2
  • 5
  • 15