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

2047 ワード

Web CORS tech テキストリンク

はじめに

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

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

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

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

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

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

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

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

詳しくは以下参照

この問題について(【やさしい】CORSとは【紙芝居】), 我々は、より多くの情報をここで見つけました https://zenn.dev/ryomm/articles/691cd600486ae0

著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。

Collection and Share based on the CC protocol