👯‍♂️

【やさしい】CORSとは【紙芝居】

2022/04/10に公開

はじめに

CORSとはCross-Origin Resource Sharing(オリジン間リソース共有)の略で、オリジンが違うときにその通信を許可するかどうか決めるブラウザの機能です。
CORSとは何か?のゆる〜い概要を紙芝居形式で軽くまとめました。

CORSとは

フロントのwebアプリやサーバーサイドのAPIなどはそれぞれのサーバー上で立っていて、それぞれオリジンがあります。
オリジンとはドメインにポートをくっつけたようなものです。
それぞれのオリジンで立っている

サーバーサイド同士の通信では特に何も問題なく通信できます。
サーバーサイド同士の通信では問題ない

しかしフロント側からサーバーサイドにアクセスしようとするとブラウザが入ってくるので、邪魔されてアクセスできないです。
フロントからサーバサイドにアクセスすると拒否される

これは問い合わされる側が問い合わせる側のオリジンを、CORSの許可設定に追加していなかったので起こったことです。ブラウザくんがサーバーサイドくんのCORS設定を見てフロントくんのリクエストを通すかどうか判断していました。
拒否するしくみ

サーバーサイドにCORSの許可設定を追加してあげれば通信ができるようになります。
ブラウザがサーバサイドに聞いて通信を許可する

Flaskの例

Flaskの場合は、以下のようにCORS(hogehoge)で設定してやればいいです。

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

詳しくは以下参照
https://flask-cors.readthedocs.io/en/latest/api.html#flask_cors.CORS

参考

https://developer.mozilla.org/ja/docs/Web/HTTP/CORS
https://qiita.com/att55/items/2154a8aad8bf1409db2b

Discussion