window.open not passing query strings in url to backend

Question

I'm working on a node app with express that allows users to send customized emails using html templates and nodemailer. The most basic functionality is allowing them to enter the recipient's name, email and which email template to use. Everything is working fine except for the preview button. I am just getting the input values from the DOM and passing those into query strings in the window.open URL like this -

preview.addEventListener('click', () => {
    const select_email = document.getElementById('select-email').value;
    const name = document.getElementById('name').value.trim();
    const recipient = document.getElementById('recipient').value.trim();
    const queryStrings = { name, recipient, select_email };
    let url = `${location.host}/email-preview?`;

    for (const string in queryStrings) {
      if (string === 'select_email') {
          url += `${encodeURIComponent(string)}=${encodeURIComponent(queryStrings[string])}`;
      } else {
          url += `${encodeURIComponent(string)}=${encodeURIComponent(queryStrings[string])}&`;
      }
    }

    window.open(url, '_blank')
});

I have tested that this works correctly and produces a URL like this example -

localhost:5000/email-preview?name=John&recipient=exampleemail%40gmail.com&select_email=welcome-email

The window opens on click as expected, but the query strings are not being passed to the express route on the initial page load. I tried to view the network tab, but when I open dev tools it re-routes me to about:blank so there is obviously something I am missing here.

When the new window loads initially, there is nothing displayed on the page. If I refresh the page, nothing happens. However, if I click the URL bar and hit enter, the query strings reach my express get route and the page loads fine.

Here is my express route -

app.get('/email-preview', (req, res) => {
    const name = req.query.name;
    const selectedEmail = req.query.select_email;
    const email = req.query.recipient;
    const generatedEmail = selectEmail(name, email, selectedEmail);

    res.send(generatedEmail.output);
});

selectEmail is in a separate module and it returns the generated HTML. Again, everything is working fine when I manually type in the same URL that is being opened through window.open.

I have been searching for a solution to this and I can't find any answers to this specific problem. Any insight would be much appreciated

Answer 1

localhost:5000/email-preview?name=John&recipient=exampleemail%40gmail.com&select_email=welcome-email

That's not a proper URL, you're missing the initial http:// scheme. (Chrome typically hides the scheme part of a URL from you in the address bar to be "helpful", but you do need it. When you press Enter in the address bar the browser may try to help by correcting a broken URL.)

You can get the scheme of the current page from location.protocol, but it would probably be easier to use a root-relative URL so you don't have to worry about the scheme or host/port:

let url = '/email-preview?';