[Next.js] バックエンド側のAPI取得時にCORSエラーでfetch失敗する。

実現したいこと

Next.jで自作アプリを作っています。（Next.jsは初心者です。）
PropsやStateの仕組みを少し理解できたと思うところでリストを作ろうとしていますがうまくいきません。サーバーサイド言語とフロントを別々にして作っていて、fetch関数でサーバーからのデータを取得していますが、fetch関数実行時に「TypeError: Failed to fetch」のエラーがでて失敗します。

作ろうとしているリストは、一番下に"さらに表示"ボタンのようなボタンがあり、それを押すごとにN個ずつ外部から続きのリストデよータを取得してきて、後ろに追加していき縦に長くなっていくようなものです。

実装的な構想としては、コンポーネントが呼ばれたらリストのデータをfetchしてきて、それをuseState()で監視させ、リストの更新時には再度fetchしてきて既存のリストデータと合体させるような形で更新していくような作りを想定しています。（この作成方針で絶対実現したいとかではなく、自分の技術レベルの範囲内で実現方法を考えた結果たどり着いた方法です。）

9/21 8:00追記
ブラウザのコンソールを見ると、画像のようなエラーが出ていて、これを調べたらCORSエラーというエラーが原因となっているようでした。

解消方法を調べてみたところ、通信時のhttpヘッダにアクセスを許可するような修正が必要との様子だったのでこちらを参考にfetch関数を後述の通り修正を加えました。
ですが変わらず、コンソール上でエラー出ています。
解消方法をご存じの方いたらよろしくお願いしまします。

発生している問題・分からないこと

前置きが長くなりましたが、問題となっているのは、後述するソース内でfetch関数が裏で失敗しているところです。エラー画面上に「TypeError: Failed to fetch」と大きく表示されています。（それ以前に呼ばれたコンポーネント内の要素は描画されている）

解決方法をご存じの方がいたらよろしくお願いします。

該当のソースコード

"use client";
import { useEffect, useState } from 'react';
import { fetchUser } from '@/lib/getter';

const getUserList = async () => {
    const userList = await fetchUser();        //３fetchUser()内でfetch関数が呼ばれリストのデータが返される（ここで失敗する。）
    return userList;
};

export default  function MakeList() {        //１コンポーネントが呼ばれる
    const [userList, setUser]  = useState([{}]);

    useEffect(() => {
        const fetchedUser = getUserList();        //２useEffectが実行されgetUserList()が呼ばれる
        setUser(fetchedUser)        //４取得したリストデータをsetUser()で監視する。（エラーのためここは実行されない）
      }, []);

    return ( 
        <>
            {userList?.map((obj) => (
                <React.Fragment key={obj.lisId}>
                    <div key={obj.lisId}>
                        <div>
                            {obj.user}
                        </div>
                    </div>
                </React.Fragment>
            ))}    
        </>
    );
}

////以下のような構造でリストデータを作り、userListで監視させようとしています。

    listData: [
      {
        user: "田中",
        listId: "1",

      },
      {
        user: "佐藤",
        listId: "2",

      }
      //更新するごとに続きが追加されていくような
    ]

9/21 8:00追記
修正したfetchのソース

  const res = await fetch(`http://localhost:3000/top?XXXXXXX=${XXXXXXXX}`, {
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
      "Access-Control-Allow-Headers": "Content-Type, Authorization",
    },
    method: 'GET',
    cache: 'no-store',
  });
  const result = await res.json();