Yak shaving logs


My life is just yak shaving.

Cross-Origin Resource Sharing (CORS)やAccess-Control-Allow-Originとはなにか

2017/07/14 #cors

By Yusuke Takita


こんにちは。Kajitz inc.の瀧田です。

フロントとバックエンドを開発している場合などにおいて No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:5100' is therefore not allowed access. が発生するケースがあります。
今までフロントとバックエンドが別れたプロジェクトに携わることがなかったのですが、副業で携わっている仕事と自分で作るWebサービスをフロントとバックエンドで分けてみたところ、フロントエンドからバックエンドのAPIにAjax通信時にAccess-Control-Allow-Originのエラーが起きてしまったので良い機会だと思ってまとめることにしました。

Access-Control-Allow-Origin is なに

ここでは Cross-Origin Resource Sharing の仕様で定義されている、アクセス制御のためにサーバーが返す HTTP レスポンスヘッダ

https://developer.mozilla.org/ja/docs/Web/HTTP/HTTP_access_control#Access-Control-Allow-Origin

Cross-Origin Resource Sharing (CORS) is なに

ブラウザが *.html*.js*.css を読み込んだサーバー(origin)以外に対してリクエストを送信(リソースを取得)するための仕組みです。

例えば http://domain-a.com から読み込まれた HTML ページが、http://domain-b.com/image.jpg に対して src でリクエストを行う場合です。

https://developer.mozilla.org/ja/docs/Web/HTTP/HTTP_access_control

セキュリティの観点から各ブラウザは、あるoriginから読み込まれた文書やスクリプトについて、そのリソースから他のオリジンのリソースにアクセスできないように制限があります。これを同一ポリシー(Same Origin Policy)を言います。

同一ポリシーをクリアしつつ、CORSを行うためにはどうすれば良いでしょうか。

開発者の対応

APIサーバー側でレスポンスに Access-Control-Allow-Origin をつけるようにします。

たとえば、Aサーバーからリクエストを受けるBサーバーがリクエストに返答するときにヘッダーに Access-Control-Allow-Origin: http://example.com とつけます。

アクセス制御シナリオの例がわかりやすいです。

次回はRailsをAPIにした場合の対応方法について書こうと思います。

このエントリーをはてなブックマークに追加

categories


最新記事


tags