CORS備忘録

はじめに

皆さんは開発をしていて「blocked by CORS policy」というエラーに遭遇したことはありませんか。
自分はそのような経験があるため、今回はCORSについて勉強してみました。

CORSとは

CORSとは「Cross-Origin Resource Sharing」、日本語に訳すと「オリジン間リソース共有」のことです。これは「同一オリジンポリシー (Same-Origin Policy)」という規約によって設けられた制限を緩めるためのもので、異なるオリジン(URL)からのリクエストでもアクセスできるようにした仕組みです。

なぜ必要

ブラウザはデフォルトで同一オリジンポリシーに従っているため、異なるオリジン間でのデータのやり取りはできません。これは異なるオリジンからのXSS(クロスサイトスクリプティング攻撃)やCRSF(クロスサイトリクエストフォージェリ)といったセキュリティ上のリスクを減らすための制限です。

• XSS
  ユーザーがWebサイトにアクセスすることで不正なスクリプトがClient(Web ブラウザ)で実行されてしまうセキュリティリスク。

• CRSF
  Webアプリケーションのユーザーが、意図しない処理をWebアプリケーション(Web Server)上で実行されるセキュリティリスク。

解決法

この制約はユーザー側にとっては優しい仕組みかもしれませんが、開発者側からするとエラーの原因になってしまうため、非常に不便です。これを解決するにはサーバー側で許可することが必要です。
「http://localhost:5500」というクライアントと「http://localhost:3000」というサーバーがあったとすると、localhost:3000側でlocalhost:5500とのータのやり取りを許可してあげれば解決できます。ではどのようにして許可してあげるのかというと、「Access-Control-Allow-Origin: http://localhost:5500」というように指定してあげれば良いわけです。また、「Access-Control-Allow-Methods: PUT」(GETとPOSTは予め許可されている)のように、必要に応じて許可するHTTPメソッドを指定することもできます。

最後に

短いですが、本記事はここで終わります。最後まで読んでいただき、ありがとうございます。