我在Heroku服务器上运行我的应用程序时遇到了一个问题;虽然它在本地工作得很好。我希望一些Maven或只是第二双眼睛会指出我可能错过的东西。
一个应用程序是一个服务器，这是代码：

const express = require('express'),
      server = express(),
      cors = require('cors');
server.use(cors({origin: "https://client-fox-67890fghij.herokuapp.com/"}));
server.get('/json-data', (req, res) => {
  res.status(200).send([
      {order:1,value:2},
      {order:10,value:29}
    ])
});

字符串
另一个应用程序是一个客户端（Next.JS），这是代码：
app/page.tsx文件：

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

型
app/components/Receiver.tsx文件：

'use client'
import {useState,useEffect} from "react"
import ListShow from './ListShow'
function Receiver() {
  const [data, setData] = useState([]);
  // const apiURL = 'http://localhost:8888/json-data'
  const apiURL = 'https://server-wolf-12345abcde.herokuapp.com/json-data'
  useEffect(() => {
    let ignore = false;
    async function fetchData() {
      const result = await fetch(apiURL);
      if (!ignore) setData(await result.json());
    }
    fetchData();
    return () => { ignore = true; }
  }, []);
  return <><ListShow dataList={data}/></>;
}
export default Receiver;

型
上传两个应用程序并检查服务器端是否按预期响应后，将Web浏览器指向：

https://server-wolf-12345abcde.herokuapp.com/json-data

型
当我将浏览器指向：

https://client-fox-67890fghij.herokuapp.com/

型
我在Firefox中的Web开发工具控制台中遇到此错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://server-wolf-12345abcde.herokuapp.com/json-data. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘https://client-fox-67890fghij.herokuapp.com/’).
Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.

型
在本地，服务器运行在localhost：8888上，客户端运行在localhost：3000上。
然后在我使用的服务器中：

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

型
为什么当服务器和客户端托管在Heroku上时，它不再工作？