主页 / coding / 问题 / 77554592
Accepted
Michel
Asked: 2023-11-27 12:56:38 +0800 CST

Node.JS 应用程序中的客户端-服务器连接

  • 772

我正在检查 CORS 的工作原理，并回顾 Node.JS 应用程序中客户端-服务器概念的基础知识。我有一个问题。

这是我的服务器代码：

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);

通过将 Web 浏览器指向此 URL：

http://localhost:8888/json-data

我可以确认服务器正在按预期工作，返回包含 3 个项目的数组。

我的问题与客户有关。

当我为客户端使用以下代码时：

'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>
  )
}

我在网络浏览器中得到了我期望的答案：

Hello Receiver !!

我在日志中看到了 3 个预期项目（即 Web 开发人员工具控制台）。

另一方面，如果我为客户端使用此代码：

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;

我在网络浏览器中得到这个答案：

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

为什么我没有从服务器获得这三个项目，而只获得两个项目？

以上面的两个版本的客户端为起点，有没有办法放下我的代码，以便我在答案中收到服务器提供的所有项目？

作为额外的信息，客户端的使用方式如下：

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>
  )
}

我还为客户端尝试了下面的代码（基于此处找到的代码：https ://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#fetching-服务器上的数据与提取）

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>
}

但我仍然得到与之前试验相同的结果。在网络浏览器中的这个答案：

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

1 个回答

  1. Best Answer

    如果你想在 CORS 实际上很重要的客户端发出请求，你需要使用 React 状态和效果钩子。这是因为客户端组件不能是异步函数；他们必须使用 React 的状态生命周期来提供实时更新。

    '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>;
}

    或者，您可以使用 Next.js 异步服务器组件。如果您觉得获得的数据已过时，您可能需要禁用缓存

    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

相关问题