How can set request header in angular for redirection URL

Question

We are create the input element for redirection URL and send the data on redirection URL in payload and in doing so we are able to do, so But simultaneously when we set the request header on the same redirection URL but the request header is not getting set. We are unable to do this. Please help us how to set header in Request Headers when we sent data in payload on redirection URL. We are using the below code.

app.component.html
<button (click)="redirectURL()">Redirect different URL</button>

app.component.ts

setHeader(url: any, newObj: any){
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "post", url);
    xmlHttp.setRequestHeader("iv-user", 'party_id');
    console.log('responseText : ' , xmlHttp.responseText);
    xmlHttp.onreadystatechange = function() {
      if(xmlHttp.readyState == 4) {
        alert(xmlHttp.responseText);
        console.log('xhr responseText : ' , xmlHttp.responseText);
        var data = xmlHttp.responseText;  
        var jsonResponse = JSON.parse(data);    
        return jsonResponse;
      }
    }
    xmlHttp.send(newObj);
    
    return xmlHttp.responseText;
}


redirectURL() {
  let form = document.createElement('form');
  console.log('form : ' , form);
  let actionUrl = "https://reqres.in/api/users";
  form.setAttribute('method',"post");
  form.setAttribute('action',actionUrl);
  form.setAttribute('style',"display:none");

  let a = document.createElement("input");
    a.type = "text";
    a.name = "party_id";
    a.value = "111111111";

    let b = document.createElement("input");
    b.type = "text";
    b.name = "party_id2";
    b.value = "2222222";

    let c = document.createElement("input");
    c.type = "text";
    c.name = "party_id3";
    c.value = "33333333";

    let d = document.createElement("input");
    d.type = "text";
    d.name = "party_id4";
    d.value = "44444444";

    let e = document.createElement("input");
    e.type = "text";
    e.name = "party_id5";
    e.value = "5555555";

    form.appendChild(a);
    form.appendChild(b);
    form.appendChild(c);
    form.appendChild(d);
    form.appendChild(e);

    document.getElementsByTagName('body')[0].appendChild(form);
    const myform = document.createElement('form');
    console.log('my form : ' , form);
    
    let newObj = {
      name: 'sk',
      job: 'developer'
    }
    this.setHeader("https://reqres.in/api/users", newObj);
  
    form.submit();
  
}

You don't need to create DOM elements to send a form-style HTTP request. — Gaël J
– Gaël J, Commented Jan 1, 2023 at 11:52
Is this AngularJS or Angular 2+? Seems like Angular2+ but you're using very low level stuff rather than the HttpClient of Angular. — Gaël J
– Gaël J, Commented Jan 1, 2023 at 11:52
We are using Angular2+. Please explain with the help of our code, how to send the data in the payload against the redirected URL and how to set the header in the Request Headers. — Salman Khan
– Salman Khan, Commented Jan 1, 2023 at 12:05
This should help: stackoverflow.com/questions/41031890/… as well as the official documentation angular.io/api/common/http/HttpClient — Gaël J
– Gaël J, Commented Jan 1, 2023 at 12:24
Can you make your code examples more complete which have sent with you? Sending own data on that redirect URL and we are not able to set request header on that URL. We ask you for your help? — Salman Khan
– Salman Khan, Commented Jan 1, 2023 at 13:33

Mehyar Sawas · Accepted Answer · 2023-01-01 15:30:09Z

0

Communicating with a server on Angular is recommended using HttpClient. So you could use the Angular Http Module to send your post request with headers and body.

You could also read the angular documentation about the backend communication for more details.

And here is how this is done in Angular:

const newObj = {
      name: 'sk',
      job: 'developer',
};

const headers = new HttpHeaders({ 'iv-user': 'party_id' });

this.http.post('https://reqres.in/api/users', newObj, { headers }).subscribe((response) => {
        // do something with the response
});

You could then add the data you want to the body of the request instead of using the form element like this:

const newObj = {
party_id: 111111111
party_id2: 2222222
party_id3: 33333333
party_id4: 44444444
party_id5: 5555555
};

Here is my stackblitz example

edited Jan 1, 2023 at 15:30

answered Jan 1, 2023 at 15:23

Mehyar Sawas

1,2667 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Salman Khan Over a year ago

Thanks for your support. We have called API successfully but we are unable redirected to this URL https://reqres.in/api/users with below data and Request Header. Please help me, how to rediect into this URL and send data into payload https://reqres.in/api/users and how to set with request header const headers = new HttpHeaders({ 'iv-user': 'party_id' }); Payload data const newObj = { party_id: 111111111 party_id2: 2222222 party_id3: 33333333 party_id4: 44444444 party_id5: 5555555 };

Mehyar Sawas Over a year ago

Is this an angular Route or just another website?

Salman Khan Over a year ago

It is other URL. This URL should redirect to "reqres.in/api/users" when "redirecter()" function is called, and the payload must have "iv-user","party_id" set in the request header with this data const newObj = { party_id: 111111111 party_id2: 2222222 party_id3: 33333333 party_id4: 44444444 party_id5: 5555555 };.

Mehyar Sawas Over a year ago

You mean redirect in the browser? Browser does not accept post request. It must be GET with params

Salman Khan Over a year ago

Yes!!!! We are able to send data to redirected URL but not able to set "iv-user", "party_id" in request header. In the above code that I have posted, data is being sent in payload but request header is not being set. Please help me.

|

Collectives™ on Stack Overflow

How can set request header in angular for redirection URL

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related