朝活150日目　CORSポリシー

エラーが出てた。
何となく？
ぼやっとしか理解できてなかったので質問

私の認識が合っているか教えてください。

今CORSポリシーによる制約を受けているのは、フロントから直接APIにリクエストを投げているから。これはfetchTideData.tsはブラウザに読み込まれて、フロントエンドのサーバではなくブラウザから叩かれている。その為ポリシー制約を受ける。

示してもらっている方法は、バックエンドのサーバからたたきに行っているので、CORSポリシーを回避できる。
これはcurlを叩いているような状態ですか？

---

はい、あなたの理解は正確です。ここでのキーとなる点を確認しましょう：

1. **フロントエンドから直接APIを叩く問題**：
  - フロントエンドのコード（Reactなど）はブラウザで実行されます。ブラウザはセキュリティの一環としてCORS（Cross-Origin Resource Sharing）ポリシーを実施しています。これは、フロントエンドのオリジン（例えば `localhost:3000`）と異なるオリジン（APIのホスト）へのリクエストを制限するものです。これにより、異なるオリジンからのリソースを無制限に取得することができなくなります。

2. **バックエンドサーバーからAPIを叩くメリット**：
  - バックエンドサーバー（Node.js等）からAPIリクエストを行う場合、このCORSポリシーの影響を受けません。サーバーからサーバーへの通信はCORSポリシーの制約を受けないため、任意の外部APIからデータを自由に取得できます。これは、コマンドラインからcurlコマンドを使用する場合と似ています。

3. **プロキシサーバーとしてのバックエンドの役割**：
  - バックエンドサーバーはプロキシとして機能し、フロントエンドのリクエストを受け取って外部APIに転送し、そのレスポンスをフロントエンドに返す役割を果たします。これにより、フロントエンドはCORSの制約を回避しつつデータを安全に取得できます。

したがって、提案された構成では、バックエンドサーバーが中継点となり、セキュリティリスクを抑えつつAPIからデータを取得できるようになります。これは開発において一般的に採用される安全なアプローチです。

---

あねー
あのセキュリティの分厚い本で読んだ気がする…

今はモニターが低すぎるから、少し高くするために台座としての仕事をしてるから、引っ張り出してまた復習してみようかなぁー

今日は出社日なのでここまでー