How to add request headers as array to window.open post url in javascript?

Question

I have code something similar.

url : /files/docuemnttype/zipfile

window.open('POST', url, '_blank',{"reporttype" : [1,2,3,4,5]});

I am trying to send the reporttype array as request header in post call with window.open.

Can some one help me how this work.

Thanks!!

There is no such thing as a window.open POST request. Read the documentation at [MDN Web API Documentation Reference - Window.open()](https://developer.mozilla.org/en-US/docs/Web/API/Window/open). — georgeawg, Feb 18 '19 at 19:55
There is an open issue for adding support for headers to the window.open function in the HTML standard. Please voice your opinions and needs on there. [https://github.com/whatwg/html/issues/7810](https://github.com/whatwg/html/issues/7810) — Dan, Apr 14 '22 at 21:34

score 0 · Answer 1 · answered Feb 18 '19 at 14:13

0

the question here address this problem. You can't do it with 'window.open' fuction on JavaScript.

You need to pass this information with XMLHttpResponse object using the setRequestHeader function, or manipulate the request through the backend server, if you have access to it.

answered Feb 18 '19 at 14:13

Gláucio Oliveira

9
2

I need to send the array of file id list to my backend to download the zip file by using window.open with new tab. Could you please give me some example how to do this with XMLHttpResponse ??? Thanks!!! – Bala Feb 18 '19 at 14:23
1

Hey Bala, why don't you send this information through the url parameter? for example: url : /files/docuemnttype/zipfile?reporttype=1,2,3,4,5 `window.open('POST', url, '_blank',{"reporttype" : [1,2,3,4,5]});` – Gláucio Oliveira Feb 18 '19 at 14:32
It will be a security issue since I am working on banking project its not allowed to send the important info in the url parameters, also user may select 100 files then my url will be too long. Thanks – Bala Feb 18 '19 at 14:51

Krzysztof Krzeszewski · Accepted Answer · 2019-02-19T17:33:12.257

0

You cannot use window.open to do POST request to the backend service, what you could do would be use fetch function

fetch(url, {
  method: "POST",
  body: JSON.stringify({"reporttype" : [1,2,3,4,5]}),
  headers: {"Content-Type": "application/json"}
    .then(response => response.json())
    .then(data => console.log(data));

You could also try using XMLHttpRequest

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    console.log(xhr.response);
  }
}

xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type", "application/json");
xhr.send(JSON.stringify({"reporttype" : [1,2,3,4,5]}));

edited Feb 19 '19 at 17:33

answered Feb 18 '19 at 14:35

Krzysztof Krzeszewski

5,912
2
17
30

Is it possible to do a GET with window.open by passing the array as request header ? so that I can change my backend call to GET method. basically my request should send array of file id's and I want my zip file download should open in new Tab. Thanks!!! – Bala Feb 19 '19 at 08:26
Also I tried above code with HMLHttpRequest which gives me "Failed to execute 'setRequestHeader' on 'XMLHttpRequest': The object's state must be OPENED" error. – Bala Feb 19 '19 at 15:08
my bad try to reorder the open and setrequest calls – Krzysztof Krzeszewski Feb 19 '19 at 17:33

How to add request headers as array to window.open post url in javascript?

2 Answers2