Help us understand the problem. What is going on with this article?

クロスオリジンリソース共有(CORS)とAccess-Controll-Allow-Originの関係性

More than 1 year has passed since last update.

React.js で作ったアプリからtwitterのAPI叩くと 'Access-Control-Allow-Origin'headerがないよって怒られるのを2回経験したのでAccess-Controll-Allow-OriginとCORSについて詳しく確認したいと思います。

TL:DR;

Screen Shot 2018-10-09 at 18.52.02.png

CORS(Cross Origin Resource Sharing) は異なるドメイン間でブラウザによって通信をすることであり、Access-Controll-Allow-OriginはCORSを可能にするための設定である。

ウェブブラウザのデフォルトの決まりごと

Screen Shot 2018-10-09 at 17.19.37.png

  • セキュリティ上の理由より、ブラウザはクライアントサイドのスクリプトによって開始されるドメイン間(オリジン間)のHTTPリクエストについて同じドメイン間では無い場合そのHTTPリクエストを受け付けないようにしてある。

  • もし異なるドメインにHTTPリクエストを投げたいのであるならリクエストを受け取る側でAccess-Control-Allow-Originヘッダーにリクエストを投げたドメインサーバーが自分のサーバーにアクセスするのを許可する設定を記述すれば良い。

  • access-controll-allow-origin: ドメイン名と記述するがaccess controll : allow (origin ドメイン名) と解釈するとわかりやすくなる気がする。

「'Access-Control-Allow-Origin'headerがないよ」って怒られた時の対処法

Screen Shot 2018-10-09 at 17.18.14.png

例)twitterのAPIはCORSが許可されていないのでクライエントサイドのreact.jsからAPIを叩くことはできない 。

自分でtwitterのAPIを叩く用のサーバーを立てれば良い。

flaskやnode.jsでサーバーを立ててtwitterのAPIを叩き、そのサーバーでCORSを許可してそのサーバーを叩くことでtwitterのAPIをreact側から間接的に叩く。(俗に言うもう一つサーバーを用意して噛ませると言うこと)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした