CORSエラーって

WEBの技術や知識はとても便利で画期的だと思います。それゆえに、追いつくにはなかなか難しいです。
私は書籍やネット上から知識を吸収し、日々先輩を追い越すために、上司に追いつくために精進していますが、なかなかすべての知識を身に着けることは難しいです。
今回はそんな中上司から教えていただいた知識をアウトプットするために本記事を記載します。

CORSエラーとは？

表題に「CORSエラーとは？」と記載しましたが、その前に抑えておきたい知識がありましたので、まずはそちらから・・・

同一オリジンポリシーとは？

SORS(Same-Origin Resource shareing)とも呼ばれ、外部のAPIサーバへのHTTPリクエストを制限するための指針です。
つまり、むやみやたらにAPIを利用されるとサーバへの負荷やセキュリティの観点からよろしくないので、利用できるユーザを制限するということです。
たとえば、見ず知らずのユーザがAPIを利用してデータを更新できたら(家具の配置を変えられたら)怖いですよね。このような事態を防ぐために、APIキー(鍵)があっているかどうか認証して、入り口を通過できるユーザを制限しています。

脇道：APIとは？

Application Programming Interfaceの略称で、APIとして公開されたプログラムを外部から手軽に利用できるように提供する仕組みのことです。
この仕組みにより、外部のユーザはAPIを経由して内部プログラムを呼び出すことができます。

オリジンとは？

オリジンとは下記の3つのことを概念的に指しますが、下記3つが同じことが「同一オリジン」と呼びます。

ホスト：ドメインのこと。
スキーム：http もしくは https のこと。
ポート：通信先となるソフトウェアの識別子のこと。

CORS(Cross-origin Resource shareing)とは？

SORSでの制限を一部解除することで異なるオリジンへのアクセスを許可したものです。

たとえば、下記サーバスクリプト「httpClient」がCROSに該当します。

まとめ：CORSエラーとは？

改めまして、上述の内容からCORSエラーについてまとめようと思います。
そもそも、CORSとは異なるオリジンへのアクセスを一部許可したものです。このことから、CORSエラーとは異なるオリジンへアクセスした際に発生するエラーであることがわかります。
また、SSLサーバ証明書が登録されていないためにCORSエラーが発生することもあります。

CORSエラーへの対処方法

Access-Control-Allow-OriginヘッダにURLを追加する

まずは、サーバ側のAccess-Control-Allow-OriginヘッダにURLを追加しましょう。

SSLサーバ証明書を追加する

上述した通り、SSLサーバ証明書が登録されていないために発生している可能性があるため、SSLサーバ証明書を登録しましょう。

参考資料

同一オリジンポリシーを理解する。CORSエラーの原因と回避方法！

CORSエラーってなに？どうすれば解決するの？

用語集｜API（エーピーアイ）