Sending Data via XMLHTTPRequest does not work on Webserver

Question

I am trying to send some data about users (in this example just the first and the last name) from a html file on a webserver via XMLHTTPRequest to a Node express server. It works fine on a local server, I just can't get it to work on the webserver. This the crucial part of my html:

    <br>
        <div class="textbold">First Name</div>
        <input name="fn" id= "first"><p>
        <div class="textbold">Last Name</div>
        <input name="ln" id="last"><p>
    <br>
        <input type="button" class="button" onclick="request()" value="Send"> 

<script>
function request() {
    var firstname = document.getElementById("first").value
    var lastname = document.getElementById("last").value

    var xhr = new XMLHttpRequest()
    xhr.open('GET', "http://urlofmywebbrowser.com/request")
    xhr.setRequestHeader("Content-Type", "multipart/form-data");
    xhr.send("firstn="+firstname+"&lastn="+lastname)
}
</script>

This is the script of the express server:

var express = require('express')
var app = express()
var port = 3000

app.get("/request", function (req) {
    let firstname = req.query.firstn
    let lastname = req.query.lastn
    console.log(vorname, nachname)})

The script then goes on to save the data into a json file, which again works fine on my local server, but I was not able to test it yet on the webserver. I think possible mistakes might be with the URL or the Port number, but I tried various combinations and cannot get it to work. Thanks in advance for your help!

Answer 1

An HTTP request can include data in:

• The query string of a URL
• The body

If you are making a GET request then it must go in the query string of the URL.

You are passing it to send() which puts it in the body. This isn't allowed so it will be ignored.

---

If you put it in the body (which means changing to a POST request) then you need to make the Content-Type match the data format you are using.

You are using application/x-www-form-urlencoded but claim you are sending multipart/form-data .

---

If you put it in the body (see above) then Express requires you read it from req.body and not req.query .

It also requires that you add suitable body parsing middleware.

---

You need to not forget " to end a string literal

---

You shouldn't mash strings together to construct data formats. That fails to deal with special characters in the input. Use APIs that will construct them for you.

---

The fixes

Assuming you are trying to make a GET request then:

Remove xhr.setRequestHeader("Content-Type", "multipart/form-data");

and

Change xhr.send("firstn="+firstname+"&lastn="+lastname) to xhr.send()

and

Change:

xhr.open('GET', "http://urlofmywebbrowser.com/request")

to

const url = new URL("http://urlofmywebbrowser.com/request");
url.searchParams.append("firstn", "firstname");
url.searchParams.append("lastn", "lastname");
xhr.open('GET', url);