読みは？
こるす？
CORSの対応をしないとどうなるのか
APIにアクセスできずにJSでエラーが起きたりする。
じゃあどうやって解決するのか・・・。
↓を読んで簡単にお勉強。
「オリジン」を知ろう
スキーム(例：http)、ホスト(例：example.jp)、ポート(例：80)
の組み合わせのこと。
オリジン内であれば、保護範囲内のリソースとして取り扱う。
逆に異なるオリジンの場合「クロスオリジン」という。
Same-Origin Policy(SOP)という決まりを知ろう
SOPは、クロスオリジンの場合、リソースの読み書きを禁じることのこと。
XMLHttpRequestやCanvasは、
このオリジンの制約に依存してしまうため、
APIGatewayを使う場合、SOPを考える必要がある。
※CookieやHTTP認証はオリジン以外を動作の制約としている
つまり、CORS(Cross-Origin Resource Sharing)とは
JSONPに替わる方法として、
XMLHttpRequestで異なるドメイン同士でリソースを共有する仕組み。
ブラウザはCORSを検出すると、実際にメソッドを投げる前に、
OPTIONSメソッドによる検査を行う。(ここ重要)
CORSの対応まとめ
- OPTIONSメソッドを用意
- OPTIONSメソッドの検査を通るようにCORSの対応を実装
- 使いたいHTTPメソッドでもCORSの対応を実装
CORSに必要なレスポンスヘッダ
| レスポンスヘッダ | 値 | 説明 |
|---|---|---|
| Access-Control-Allow-Origin | * | 必須であり、基本。 許可したいオリジンを指定するのだが、どこからでも良いなら「*」 |
| Access-Control-Allow-Headers | Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token | 使用できるヘッダであることを認めるもの。 クライントによって、Originのみだと動作しない時があるため、コレも追加で指定。 |
| Access-Control-Allow-Methods | POST,GET,OPTIONS | 許可されるHTTPリクエストメソッド |