2

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();
  
}
Salman Khan
  • 47
  • 5
  • You don't need to create DOM elements to send a form-style HTTP request. – Gaël J Jan 01 '23 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 Jan 01 '23 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 Jan 01 '23 at 12:05
  • This should help: https://stackoverflow.com/questions/41031890/how-to-send-form-data-in-a-http-post-request-of-angular-2 as well as the official documentation https://angular.io/api/common/http/HttpClient – Gaël J Jan 01 '23 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 Jan 01 '23 at 13:33

1 Answers1

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

Mehyar Sawas
  • 1,187
  • 6
  • 15
  • 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 };` – Salman Khan Jan 02 '23 at 04:56
  • Is this an angular Route or just another website? – Mehyar Sawas Jan 02 '23 at 08:59
  • It is other URL. This URL should redirect to "https://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 };`. – Salman Khan Jan 02 '23 at 09:09
  • You mean redirect in the browser? Browser does not accept post request. It must be GET with params – Mehyar Sawas Jan 02 '23 at 09:30
  • 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. – Salman Khan Jan 02 '23 at 09:52
  • Sorry it is not clear yet. It could mean different things. Is reqres.in/api/users a backend api or just a website? What are you going to do with the data sent in the request payload? Please explain the whole story. – Mehyar Sawas Jan 02 '23 at 11:52
  • My simple story for questions it is that. We are redirecting to a different url. we are not calling API, just redirecting on other URL. We are sending some data on that url which data we are getting in payload when url is redirected. we have shared that code with you see above. After the URL is redirected, now we are setting the header in the request header of that redirected URL which we are not able to set. Please help us how to set request header header when we redirect to that url. As request header we have to set `"iv-user", "party_id"`. – Salman Khan Jan 02 '23 at 14:51
  • As far as I know, you can't pass headers to a url in browser. You can only pass request query params. You could just build a url with the query params and navigate to it with `window.location.href = url` – Mehyar Sawas Jan 02 '23 at 18:05
  • Also if you send these headers how could you read them there? And why exactly header instead of using params to pass data further? – Mehyar Sawas Jan 02 '23 at 18:29
  • This is a requirement From URL owner end that when the URL is redirected, the request header of the redirected URL must have data send in payload and `"iv-user","party_Id"` as the header set. Please help me if possible us by explaining through code. – Salman Khan Jan 03 '23 at 05:51