35
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

【CORS】クロスドメインによるエラーについて

javascriptで、AppleのRSSジェネレータを使ってappstoreのランキングを取得しようと思ったのだが、以下のようなエラーが吐かれた。

---has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource

「CORSのポリシーによってブロックされました。Access-Control-Allow-Originがリクエストのhttpヘッダに無いから。」ってことだが、まず「CORS」と「Access-Control-Allow-Origin」が何なのか分からん。から調べた。

CORS(Cross Origin Resourse Sharing)とは

fetchXMLHttpRequestといった、javascriptのAjax通信をする際に、安全に情報をやりとりできるようにするための規約。
基本的には、Ajaxは同じドメイン同士での通信を前提としている。
このCORSによって異なるドメイン間の通信の安全性が保証されるのである。

主要なwebブラウザは皆、CORSをサポートしている。

Access-Control-Allow-Originとは

httpヘッダ内のパラメータの一つだ。
例えば、上記のAppleのサイトのhttpヘッダに、

Access-Control-Allow-Origin: 私のサイトのドメイン(または「*」で全てのドメインからのリクエストを許可)

と設定されていれば、私はデータを取得できたはずなのである。

解決策

Ajaxではなく、node.jsやphp、pythonといったサーバサイドで、情報を取得し、フロントエンドに渡してあげるのが一番手っ取り早いみたいだ。

また、Access-Control-Allow-Originを解決するchromeのプラグインもあるようだが、ンーー。。

以下の記事が大変参考になりました。
Cross-Origin Resource Sharing(CORS)を使用したHTTPリクエスト
【CORS】クロスドメインによるエラーを解決する

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
Sign upLogin
35
Help us understand the problem. What are the problem?