「エラー箇所」の画像のコードと「クライアント側のコード(該当箇所のみ)」のコードと違うのですがどっちがホントですか?
要求先 http://127.0.0.1:8001/files/
は同一ドメインですか? 異なるドメインの場合サーバー側で CORS 対応はされてますか? mode: "no-cors" を付与した意図は何ですか?
【追記】
上の質問に対する返事がないので想像ですが・・・
クロスドメインに対する要求になっているが、サーバー側は CORS 対応してないので、fetch で mode: "no-cors" を設定すれば CORS 関連の問題は回避できると思っていませんか?
もしそうだとすると、そういうことはできないので、サーバー側で CORS 対応が必要です。そして mode: "cors" (デフォルト) に設定する必要があります。
mode: "no-cors" というのは CORS 対応しないという意味のようです。
クロスドメインに対する fetch で mode: "no-cors" とした場合、たとえサーバー側で CORS 対応がしてあったとしても、ブラウザ側では CORS 対応してくれません。
下の画像は自分の開発環境の Windows 10 の Chrome 119.0.6045.160 で、CORS 対応してあるサーバーに要求を出して応答を見たものです。違いが判るでしょうか?
mode: "no-cors"
mode: "cors" (デフォルト)