I have a frontend script that takes a value from an HTML button and passes it to the backend. It works just fine, except that if the button is clicked repeatedly to send a bunch of POST requests to the backend, only about seven or eight pass through before the rest show up as Pending in the browser's element inspect.

Is this an issue with the code, or is this to be expected as some kind of port filtering mechanism in the network?

Frontend:

async function submitCity(){
    let x = document.getElementById("wg_input").value;
    console.log("Successfully captured city name:", x);
    let toWeather = JSON.stringify({city: x});
    console.log("Input data successfully converted to JSON string:", toWeather);
    
    const options = {
        method: 'POST',
        mode: 'cors',
        headers: {'Content-Type': 'application/json'},
        body: toWeather
    }

    fetch('http://localhost:3000', options)
    .then(res => console.log(res))
    .catch(error => console.log(error))
}

Server.js:

// Dependencies

const express = require('express');
const bp = require("body-parser");
const request = require("request");
const jimp = require('jimp');
const cors = require('cors');
const wgServer = express();
const port = 3000;

// Dotenv package

require("dotenv").config();

// OpenWeatherMap API_KEY

const apiKey = `${process.env.API_KEY}`;

// Basic server initialization

wgServer.use(cors())
wgServer.use(bp.json())
wgServer.use(bp.urlencoded({ extended: true }))

wgServer.listen(port, function() {
  console.log(`Example app listening on port ${port}!`)
});

wgServer.post('/', async function (req, res) {
  res.set('Content-Type', 'text/plain');
  console.log(req.body);
  let preclean = req.body;
  console.log(preclean);
  //const data = await req.body;
  // let jsonData = JSON.stringify(req.body);
 // res.status(201);
  //res.json();
});