GET net :: ERR_CONNECTION_REFUSED при загрузке изображений в SPA с использованием ajax и сервера

Question

Попытка создать одностраничное приложение. Первая половина моего кода работает (перезагрузка показывает изображения).

НО при отправке формы я получаю net :: ERR_CONNECTION_REFUSED ошибку. Я не могу понять, что я делаю не так? В настоящее время у меня есть вложенный вызов ajax, потому что в противном случае изображение пытается загрузить, прежде чем оно будет передано в файл json.

Мой AJAX код на стороне клиента ::

$("document").ready(function(event){ 
  //event.preventDefault()
  $.ajax({
    url: "images.json",
    type: "GET",
    datatype: "JSON",
    error: function(){
      $("#status").html("<p> An error occured </p>");
    },
    success:
      function(data){
        var $image = $('#new-image')
        $.getJSON("images.json", function(data){
              $image.html("");
            for (var i = data.length; i--;)
            {
              console.log(data[i]["name"])
              $image.append('<img src="' + data[i]["name"] + '">');
            }
      })
    }
  })
})

$('form').on("submit", function(event){
  event.preventDefault() 
  var formData = new FormData()
  formData.append('name', document.getElementById('name').value)
  formData.append('avatar', document.getElementById('avatar').files[0]) 

    $.ajax({
      type: "POST",
      url: "upload",
      enctype: 'multipart/form-data',
      data: formData,
      processData: false, 
      contentType: false, 
      cache: false,
      error: 
        function(){
          $("#status").html("<p> An error occured </p>");
        },
      success:
        function(formData){
          console.log("success")
          $.ajax({
            url: "images.json",
            type: "GET",
            datatype: "JSON",
            timeout: 4000,
            error: 
              function(){
              $("#status").html("<p> An error occured </p>");
            },
            success:
              function(data){
                var $image = $('#new-image')
                $image.html("");
                for (var i = data.length; i--;)
                {
                  console.log(data["name"])
                  $image.append('<img src="' + data[i]["name"] + '">');
                }
              }
          })
        }
      })
})

В случае, если это помощь, моя сторона сервера:

//npm modules
const https = require('https');
const express = require("express");
const session = require("express-session");
const bodyParser = require('body-parser');
const multer = require('multer');
const path = require('path');
const fs = require("fs");
const sharp = require('sharp');
const {v4: uuidv4} = require('uuid');
const cors = require("cors");

// Set The Storage Engine
var storage =   multer.diskStorage({
    destination: function (req, file, callback) {
      callback(null, './client/images');
    },
    filename: function (req, file, callback) {
      callback(null, file.fieldname + '-' + Date.now());
    }
  });


//create server
const app = express();

app.use(express.static(__dirname + '/client'));
app.use(cors());
app.use(bodyParser.urlencoded({ extended: false })); 
app.use(bodyParser.json());
//app.use(express.static("./client/webpage.js"))
app.get('/favicon.ico', (req, res) => res.status(204));

var images = require("./client/images.json");

// Multer single file parser
const upload = multer({limits:{fileSize:4000000}}).single('avatar')
app.post('/upload', (req, res)=>{
    upload(req, res, async function(err){ 
     // check for error thrown by multer- file size etc
     if( err|| req.file === undefined){
         console.log(err)
         res.send("error occured")
     }else{
        var image = await sharp(req.file.buffer)
            .resize({ width: 200, height:200 }) 
            .toFile('./client/'+req.file.originalname)
            .catch( err => { console.log('error: ', err) })
        res.send(req.body)
        const newImage = {
          id: uuidv4(),
          name: req.file.originalname
        };
        images.push(newImage);
        const json = JSON.stringify(images);
        fs.writeFile('./client/images.json', json, 'utf8', console.log);
            }
          })
    })


//tell server which port
app.listen(8000, () => {
    console.log('Listening on localhost')
  });

Пожалуйста, помогите. Потратил так много времени на попытки исправить это, и я готов сдаться.

html код:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/sign-in/">
    <link href="index.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
  </head>
  <body>
    <header>
        <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
          <a class="navbar-brand" href="#"> FIRST SPA PAGE </a>
          <div class="search">
            <div class="collapse navbar-collapse" id="navbarCollapse">
              <form class="form-inline mt-2 mt-md-0">
                  <input class="form-control mr-sm-2" id="search-box" placeholder="Search" >
                <button id="search-button" class="btn btn-outline-primary" type="submit" >Search</button>
              </form>
            </div>
          </div>
        </nav>
    </header>

      <div id="wrapper">
        <img src="mountains.jpg" id="coverphoto" alt="cover photo">
          <div class="centered">WELCOME.</div>
      </div>

      <div class="container">
        <h1>File Upload</h1>
        <form id="form" enctype="multipart/form-data" method="post">
          Name: <input type="text" name="name" id="name"/> <br/>
          Image: <input type="file"  name="image" id="avatar"/><br/>
          <input type="submit" value="Submit" />
      </form>
      <div id="status">
        </div>
      </div>
      <div id=new-image>
      </div>
    <script src="webpage.js"></script>
  </body>
</html>

file:

-APP

- сервер. js

- клиент

--- веб-страница. js

--- index. js

--- images. json

Приложение - это главная папка.

сервер. js и папка клиента внутри приложения.

веб-страница. js, index. js и images. js внутри клиента.