是否可以使用 Javascript 打开一个新窗口，将 POST 参数传递到新窗口，同时将请求作为 application/json 传递？

Question

I have a JavaScript-based browser client application that deals with a lot of state data. Occasionally that data must be gathered together into a well-formed object and dumped to a new window that accepts that data for processing.

A solution I have that already functions is the following: when the data needs to be sent, the target URL and data are passed to what is effectively this function, which leverages a virtual form element that submits the data:

function sendJson(targetUrl, jsonData) {
    let form = document.createElement("form");
    form.method = "POST";
    form.action = targetUrl;
    form.target = '_blank';

    let element = document.createElement("input");
    element.value = JSON.stringify(jsonData);
    element.name = 'json';
    form.appendChild(element);

    document.body.appendChild(form);
    form.submit();
    form.parentNode.removeChild(form);
}

This effectively crams the well-formed data into a single form field and re-encodes it as application/x-www-form-urlencoded . A PHP script awaits on the other end that extracts the data more or less like this:

$json_data = json_decode($_POST['json'], true);

This method has some upsides I like, namely:

• The new window has a distinct URL from the parent
• The network request belongs to the new window, not the parent window that opened it

These mean I can re-POST the same request over and over by simply refreshing the window and re-sending POST variables, which comes in handy.

What I do not like is that the data over the wire is URL encoded now. My network debugging tools that neatly display JSON-hierarchical data fail to parse it and instead just dump out what it now is -- a single, excessively long string full of encoded symbols. If I ever need to inspect this, I have to run it through a URL decoder and a JSON prettifier, which I find incredibly inconvenient. It would be greatly beneficial if I could send the request as application/json instead of application/x-www-form-urlencoded .

So instead, I tried a solution like this, utilizing window.open() :

function sendJson(targetUrl, jsonData) {
    fetch(targetUrl, {
        method: 'POST',
        headers: {
            'Content-type': 'application/json',
            'Accept': 'text/html'
        },
        body: JSON.stringify(jsonData)
    })
        .then(response => response.text())
        .then(text => {
            let newWin = window.open(targetUrl, '_blank');
            newWin.document.open();
            newWin.document.write(text);
            newWin.document.close();
        });
}

And PHP on the other side picks it up like:

$json_data = json_decode(file_get_contents('php://input'), true);

Now the JSON is going over the wire in its native format, solving the encoding problem. But now the call to window.document.open() resets the URL of the new window to the URL of the parent. If the new window is refreshed, it redirects to the parent window. And even if that wasn't the case, there's no POST data to refresh, since the request "belongs" to the parent window. The data has simply been streamed to the parent and written to the new window manually.

What I'm left with are two functional, but less than ideal, solutions. My question is, does a solution exist that gives me all of the features I want?

• Pure JavaScript implementation (no libraries, preferably no DOM trickery)
• POST data sent as application/json over the wire
• Request opens in a new window/tab
• New window points to a URL distinct of parent window
• New window can be re-POSTed by refreshing that window

Answer 1

No.

Only fetch and XMLHttpRequest can be used to make a request with an application/json body, and the response to those can only be handled with JS.