CORSとはなにか、CORSエラーがなぜ起こるかの簡単な解説です。

CORS(Cross Origin Resource Sharing) とは

ブラウザが今開いているサイト（サイトA）以外のサイト（サイトB）に Fetch/HttpXMLRequest を使ってリクエストを送信できるようにする仕組み。

CORSのリクエストの順番

1. ブラウザはサイトBに送信するリクエストに、サイトAを開いているという情報を Origin ヘッダとして追加する
2. サイトBは、リクエストの Origin ヘッダを見て、サイトBとは別ドメインであることを確認する。
3. サイトBは、サーバーに設定されている Access-Control-Allow-Origin 等のCORSに関する設定をヘッダに含めたレスポンスを200で返す。
4. ブラウザはレスポンスの Access-Control-Allow-Origin を見て、サイトAのドメインが含まれているか確認する。
5. サイトAのドメインが含まれていればアプリケーションのリクエストをサイトBに送信する。
6. サイトAのドメインが含まれていなければ、CORSエラーになる。

まとめ

エラーが起こるのはブラウザ側、設定が必要なのは外部サーバー（サイトB）側。 ということを覚えておけば大丈夫です。

APIを提供しているような会社はサーバーにCORSの設定を追加する必要があります。

オリジン間リソース共有 (CORS) - HTTP | MDN developer.mozilla.org

オリジン間リソース共有 (Cross-Origin Resource Sharing, CORS) は、追加の HTTP ヘッダーを使用して、あるオリジンで動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組みです。ウェブアプリケーションは、自分とは異なるオリジン (ドメイン、プロトコル、ポート番号) にあるリソースをリクエストするとき、オリジン間 HTTP リクエストを実行します。