【初学】fetchでエラー! CORSって?(未解決)

https://qiita.com/tomoyukilabs/items/81698edd5812ff6acb34

とあるAPIを使いたくて、

昨日の記事の手順通りに「フェッチフェッチー」と思っていたら、

2019-07-12 16.24のイメージ.jpg

ナンジャコリャ!

CORSやらCORBやらcross-origin やら、知らない単語がいっぱい出てきました。

(ちなみにまだ解決していません、解決法を探しにきた方はすみません)


必要だった前提知識①:Same-Origin Policy

Same-Origin Policy(同一生成文字ポリシー)・・・

異なるオリジンのリソースへのアクセスに制約をかける!!


オリジンってなによ。

【参考】http://hasegawa.hatenablog.com/entry/20130330/p1


さて、この「オリジン」とは何なのかという話ですが、これは「RFC 6454 - The Web Origin Concept」で定められており、端的に言うと「スキーム、ホスト、ポート」の組み合わせをオリジンと定め、それらが同じものは同一のオリジンとして同じ保護範囲のリソースとして取り扱うということです。

例えば、http://example.jp/fooとhttp://example.jp:80/bar はそれぞれ同一のスキーム(http)、ホスト(example.jp)、ポート(80)を持つため、同一のオリジンであると判断されます。一方、https://example.jp/foohttp://example.jp/foo はどちらも同じホストを持ちますが、スキームがそれぞれhttpsとhttpであるため、異なるオリジンのリソースであると判断されます。


ふむふむ。今も上に出ているURLのことかな。

このオリジンが2つで異なっていることをクロスオリジンというらしく、黄色いエラー部分にも単語が出てきてました。

つまりfetchしようとしたらクロスオリジンなので邪悪な行いをしていると思われてブロックされたと。


必要だった前提知識②:CORS(Cross-Origin Resource Sharing)

【参考】

https://qiita.com/tomoyukilabs/items/81698edd5812ff6acb34

https://qiita.com/nanocloudx/items/f49600b705be9d53a9b5

CORSは、クロスオリジン時のデータのやりとりの方法を定めたもの。

理屈は大体わかりました。でもこの解決法、調べていくとサイバー側でしかどうこうできないらしい、、

YQLというAPIでリクエストを肩代わりできていたらしいですが、今年終了してしまったとのこと。

https://nxpg.net/blog/tech/?p=12612

こちらのリンクによると、phpでどうにかできるらしいです。

php,できないので、一旦保留...