Mais um erro em comum aqui desse projeto. Mesmo com a colaboração dos demais, ainda sem sucesso | JS na web: CRUD com JavaScript assíncrono

Alguém consegue ver o erro? Erro no browser: cliente-service.js:31 Uncaught TypeError: data.forEach is not a function at XMLHttpRequest.http.onload (cliente-service.js:31)

 const criaNovaLinha = (nome, email) => {
    const linhaNovoCliente = document.createElement('tr')
    const conteudo =
        `<td class="td" data-td> ${nome}</td>
        <td>${email}</td>
        <td>
            <ul class="tabela__botoes-controle">
          <li><a href="../telas/edita_cliente.html" id=${id} class="botao-simples botao-simples--editar">Editar</a></li>
                <li><button class="botao-simples botao-simples--excluir" type="button">Excluir</button></li>
            </ul>
        </td>`

    linhaNovoCliente.innerHTML = conteudo
    return linhaNovoCliente
}


const tabela = document.querySelector('[data-tabela]')


const http = new XMLHttpRequest()

http.open('GET', 'http://localhost:3000/profile')

http.send()


http.onload = () => {
    //passando os dados http txt para json JS
    const data = JSON.parse(http.response)
    data.forEach(elemento => {
        tabela.appendChild(criaNovaLinha(elemento.nome, elemento.email))
    })
}

#Lista_cliente.html

<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Doguito Petshop | Clientes</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet"> 
    <link rel="stylesheet" href="../assets/css/base/base.css">
    <link rel="stylesheet" href="../assets/css/componentes/cabecalho.css">
    <link rel="stylesheet" href="../assets/css/lista_cliente.css">
    <link rel="stylesheet" href="../assets/css/componentes/tabela.css">
    <link rel="stylesheet" href="../assets/css/componentes/botao.css">
    <link rel="stylesheet" href="../assets/css/componentes/modal.css">
</head>
<body>
    <header class="cabecalho container">
        <img src="../assets/img/doguitoadm.svg" alt="Logotipo Doguito" class="cabecalho__logo">
        <nav>
            <ul class="cabecalho__lista-navegacao">
                <li class="cabecalho__link"><a href="#">Dashboard</a></li>
                <li class="cabecalho__link"><a href="#">Produtos</a></li>
                <li class="cabecalho__link"><a href="#">Clientes</a></li>
                <li class="cabecalho__link"><a href="#">Pets</a></li>
            </ul>
        </nav>
    </header>

    <main class="clientes-container">
        <table class="tabela">
            <thead>
                <tr>
                    <th class="tabela__coluna--p">Nome</th>
                    <th class="tabela__coluna--g">Email</th>
                    <th class="tabela__coluna--m tabela__alinhamento--direita"><a href="./cadastra_cliente.html" class="botao-simples botao-simples--adicionar">Novo Cliente</a></th>
                </tr>
            </thead>
            <tbody data-tabela>

            </tbody>
        </table>
        <div class="modal-container modal--fechado">
            <article class="modal">
                <h2 class="modal__titulo">
                    Excluir
                </h2>
                <button class="modal__fechar">X</button>
                <p class="modal__texto">Deseja excluir essa entrada?</p>
                <div class="modal__botao-container">
                    <button class="modal__botao modal__botao--confirmar">Excluir</button>
                    <button class="modal__botao">Não excluir</button>
                </div>
            </article>
        </div>
    </main>
    <script src="../service/cliente-service.js"></script>
</body> 
</html>

cliente-service.js

const criaNovaLinha = (nome,email,_id) => {
    const LinhaNovoCliente = document.createElement('tr')
    const conteudo = 
   `<td class="td" data-td>${nome}</td>
    <td>${email}</td>
    <td>
        <ul class="tabela__botoes-controle">
            <li><a href="../telas/edita_cliente.html" class="botao-simples botao-simples--editar">Editar</a></li>
            <li><button class="botao-simples botao-simples--excluir" type="button">Excluir</button></li>
        </ul>
    </td>`

    LinhaNovoCliente.innerHTML = conteudo
    return LinhaNovoCliente
}

const tabela = document.querySelector('[data-tabela]')

const http = new XMLHttpRequest()

http.open('GET', 'http://localhost:3000/profile')

http.send

http.onload = () => {
    const data = JSON.parse(http.response)
    data.forEach(elemento => {
        tabela.appendChild(criaNovaLinha(elemento.nome,elemento.email,elemento.id))

    })
}

ERRO QUE APARECE NO CONSOLE

Failed to load resource: the server responded with a status of 404 (Not Found) lista_cliente.html:85 Live reload enabled.

Mergulhe em programação