35
36

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-08-11

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】クロスドメインによるエラーを解決する

35
36
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
35
36

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?