ReactからLaravelにリスエストをもらいレスポンスをもらいたい

実現したい

ReactからLaravel側のサーバーにあるJSONファイルの内容を取得したい

前提

React(Localhost:3000)からLaravel側のサーバー(hocalhost:8000)にあるJSONファイルの内容を取得してReactでデータを扱いたいと考えております。 Laravelのプロジェクトファイルはxamppの
htdocsディレクトリにおいてます(localhost:80)
下記のエラーですがリクエストのパスの参照が間違っているのでしょうか？、

エラーメッセージ 　GET http://localhost:8000/players_be/public/players_list.json 404 (Not Found) 　Error fetching JSON: Error: Network response was not ok

該当のソースコード

const [jsonData, setJsonData] = useState([]) useEffect(() => { fetch('http://localhost:8000/players_be/public/players_list.json') 　//players_beはLaravelのプロジェクトフォルダ名 .then((response) => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then((data) => { setJsonData(data); console.log(jsonData); }) .catch((error) => { console.error('Error fetching JSON:', error); }); }, []); }

試したこと

・リクエスト先のパスの指定が"/players_list.json"でLaravel側のpublicフォルダ内を参照できるとChatGPTより回答を受けたのですがそれはパスが合いませんでした。
xamppのディレクトリ上(localhost:80)にあるのでhttp://localhost:8000/players_be/public/players_list.json
から
http://localhost:80/players_be/public/players_list.jsonにしたらcorsエラーになり
ます、これについてはLaravelにpublicディレクトリにあるindex.phpに下記のheader情報を追加しました。

header('Access-Control-Allow-Origin: http://localhost:3000');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS, PATCH');
header('Access-Control-Allow-Headers: *');

これを行ってもcorsが解消されません

localhost:8000を指定すればcorsは解消されますがファイルが見つからなくなります。

ご回答をよろしくお願いいたします。