Início / coding / Perguntas / 77554592
Accepted
Michel
Asked: 2023-11-27 12:56:38 +0800 CST

Conexão cliente-servidor em um aplicativo node.JS

  • 772

Estou verificando como o CORS funciona e revisando os fundamentos do conceito cliente-servidor em um aplicativo node.JS. E eu tenho uma pergunta.

Aqui está o meu código para o servidor:

const express = require('express'),
      server = express(),
      cors = require('cors');

server.use(cors({origin: "http://localhost:3000"}));

server.get('/json-data', (req, res) => {
  res.status(200).send([
            {order:10,value:29},
            {order:100,value:541},
            {order:1000,value:7919}])
});

server.listen(8888);

Apontando o navegador da web para este URL:

http://localhost:8888/json-data

Posso confirmar que o servidor está funcionando conforme o esperado, retornando um array de 3 itens.

Minha pergunta vai ser relacionada ao cliente.

Quando eu uso o código a seguir para o cliente:

'use client'

function Receiver() {
  fetch("http://localhost:8888/json-data")
  .then(res => res.json())
  .then(data => {
    console.log('Receiver-0:'+JSON.stringify(data[0]))
    console.log('Receiver-1:'+JSON.stringify(data[1]))
    console.log('Receiver-2:'+JSON.stringify(data[2]))
  })

  return(
    <div>
      <h1>Hello Receiver !!</h1>
    </div>
  )
}

Recebo a resposta que espero no navegador da web:

Hello Receiver !!

E vejo os três itens esperados nos logs (ou seja, o console de ferramentas para desenvolvedores da web).

Por outro lado, se eu usar este código para o cliente:

async function Receiver() {
  const response = await fetch("http://localhost:8888/json-data");
  const primes = await response.json();
  const data = JSON.stringify(primes)
  return <h1>{data}</h1>;
}

export default Receiver;

Recebo esta resposta no navegador da web:

[{"order":10,"value":29},{"order":100,"value":541}]

Por que não estou recebendo os três itens do servidor e apenas dois?

Tomando como ponto de partida as 2 versões do cliente acima, existe uma maneira de estabelecer meu código para que eu receba na resposta todos os itens que o servidor fornece?

Como informação extra, é assim que o cliente é utilizado:

import Receiver from './components/receiver'

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div>
        <Receiver />
      </div>
    </main>
  )
}

Também tentei o código abaixo para o cliente (com base no código encontrado aqui: https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#fetching- dados no servidor com busca )

async function getData() {
  const res = await fetch('http://localhost:8888/json-data')

  if (!res.ok) {
    throw new Error('Failed to fetch data')
  }

  return res.json()
}

export default async function Receiver() {
  const data = await getData()

  return <main>{JSON.stringify(data)}</main>
}

Mas ainda obtenho o mesmo resultado do teste anterior. Esta resposta no navegador da web:

[{"order":10,"value":29},{"order":100,"value":541}]
node.js

1 respostas

  1. Best Answer

    Se você quiser fazer a solicitação no lado do cliente onde o CORS é realmente importante, você precisa usar o estado React e um gancho de efeito. Isso ocorre porque os componentes do lado do cliente não podem ser funções assíncronas; eles devem usar o ciclo de vida do estado do React para fornecer atualizações ao vivo.

    'use client';

import { useEffect, useState } from 'react';

const fetchPrimes = async () => {
  const res = await fetch('http://localhost:8888/json-data');
  if (!res.ok) {
    throw new Error(`Fetch failed: ${res.status} ${res.statusText}`);
  }
  return res.json();
}

export default function Receiver() {
  const [primes, setPrimes] = useState([]);

  useEffect(() => {
    fetchPrimes().then(setPrimes).catch(console.error);
  }, []); // run once on mount

  return <main>{JSON.stringify(primes)}</main>;
}

    Como alternativa, você pode usar componentes do servidor assíncrono Next.js. Você pode desabilitar o cache se achar que está obtendo dados desatualizados

    const fetchPrimes = async () => {
  const res = await fetch('http://localhost:8888/json-data', {
    cache: 'no-store', // 👈 disable caching
  });
  if (!res.ok) {
    throw new Error(`Fetch failed: ${res.status} ${res.statusText}`);
  }
  return res.json();
}

export default async function Receiver() {
  const primes = await fetchPrimes()

  return <main>{JSON.stringify(primes)}</main>
}
    • 1

relate perguntas