ローカルからの通信を許可するCORS

ローカルに置いたhtmlからREST API打つとブロックされる

どういうことなんだろう？

もしかして「そもそもそんなのはサポートしてない？」

【Ajax】ローカルファイルを読み込もうとしたらCORSエラーが発生したので解決した - Qiita

HTML ファイルを「file://」というスキームを使ってブラウザで開いている場合、セキュリティの問題でエラーになります

Chromeの--allow-file-access-from-filesオプションくらいしか手段がない

FirefoxでローカルファイルのCORSを行う

一応あるけど「ブラウザのグローバル設定で」って感じなので微妙

localhostとして立ち上げた上で「from localhost」を許可する、って形にするのが無難なのだろうか？

が、そのlocalhostもダメそう

javascript - Why does my http://localhost CORS origin not work? - Stack Overflow

Chrome does not support localhost for CORS requests (a bug opened in 2010, marked WontFix in 2014).

いずれにしてもサーバーサイド側で対処してもらわないとダメだが

gpt

前提

SAM(same origin policy)の存在。そもそもオリジン異なる場合は、リクエストもらう側（API提供側）で許可設定が必要

オリジンの話

ローカルで実行するとfile://

webサーバーで実行するとそのドメイン

localhostの場合は？ localhost？

CORSを通過するには？

提供側がそのオリジンを許可する必要がある

file://は一般的に許可されていないと思われる

HTMLファイルに記載したJavaScriptコードにて、外部SaaSのAPIを叩いています。

このHTMLをローカルで実行するとCORSエラーがでて動きません。一方で、特定のサーバーに配置すると、エラーなく動きます。

なぜでしょうか？またローカル実行でもCORSが出ないようにするにはどうしたらいいですか？

CORS（Cross-Origin Resource Sharing）は、ウェブページが異なるオリジンのリソースに対して安全にアクセスするための機構です。例えば、あるウェブページが異なるドメインのAPIを利用する場合、そのAPIはCORSを通じてウェブページからのリクエストを許可する必要があります。

あなたのケースのように、SaaSのAPIを利用しているHTMLページをローカルで開くと、そのページのオリジン（つまりそのページがどこから来たか）はfile://になります。これは、ウェブサーバー上で動作しているページが持つhttp(s)のようなオリジンとは異なるため、SaaSのAPIサーバーはこの異なるオリジンからのリクエストを拒否する可能性があります。

特定のサーバーにそのHTMLを配置して実行すると、ページのオリジンはそのサーバーのドメインになります。SaaSのAPIサーバーはこのオリジンからのリクエストを許可し、CORSエラーは発生しません。

CORSエラーを解消するためには以下の2つの方法があります。

1. ローカルで簡単なWebサーバを立ち上げて、そのサーバー経由でHTMLを実行する。これによりHTMLページはhttp(s)オリジンを持つことになり、CORSエラーは発生しなくなる可能性があります。たとえば、Pythonを使って簡単なサーバーを立ち上げることが可能です。

2. あるいは、SaaSのAPIが提供している側で、CORS設定を修正し、file:// オリジンからのリクエストを許可するようにする。ただしこの方法は、APIの提供者が許可している場合のみ可能です。これは通常、セキュリティリスクを伴うため、推奨されません。