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)とは
fetchやXMLHttpRequestといった、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】クロスドメインによるエラーを解決する