はじめに

「完全に理解した」はもちろんネットスラングです。マサカリお待ちしてます。でもわかりやすいと思います。

ことの経緯

かつて書いた記事をベースに、javascriptだけでgooglemapの情報が欲しいんだよね。っていう依頼があって、えっ？それやったことねぇなぁって思って。とはいえ多分DjangoのViewで googlemap api にコンタクトしてたやつを javascript に移植すればええんやろ？って思って、ajaxのurlにgoogleapiのurlを指定してみたら出てきたんだよね。うーわなにこれもしかして学習コスト高いやつ？？とか思ったよね。

CORSとは

［オリジン間リソース共有 (CORS)］(https://developer.mozilla.org/ja/docs/Web/HTTP/CORS)

オリジン間リソース共有Cross-Origin Resource Sharing (CORS) は、追加の HTTP ヘッダーを使用して、あるオリジンで動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組みです。

もうね、日本語で書かれてるのに理解できないんだよね。オリジンってオリジン弁当かよって感じ。

助さん格さん

「この紋所が目に入らぬか！」ってやるじゃない？あれって、水戸黄門がいない世界線で、格さんがあの紋所を掲げても意味がないわけよ。なんやそのオブジェクトォー！みたいになるよね。つまりCORSの説明に都合がいいように表現すると、虎の威を借る狐が格さんなわけ。そういういわば「虎の威」がないと、爺さんのいない格さんは一般人なんだから、「委任状」がないなら大事なgoogleapiのデータはあげないもんねー！っていう仕組みがCORS。

俺、あの有名人と知り合いなんだよね

それを防ごうとしてるんじゃないか！？

委任状を書く（ヘッダーを加工する）必要がある

CORSは、ブラウザの「防衛機能」だ。つまり、サーバーサイド（Djangoでいう Views.py ね）の処理では何事もなく済んだapiデータ取得処理を、フロントエンドでやろうとすると出るエラーなんだ。わかってしまえば高速道路と下道。。。というのか「勘合貿易」みたいなもんよね。javascriptが単独でapiにアクセスしにいけないってこと。どっかのWebシステムからjavascriptファイルだけ取り出して別のWebシステムで再現できたら、googleapiさんは「誰にデータを渡した！？」となるわけだ。

えっなんでそんなjavascriptハブられてんの？

多分の話をすると、昔ブラウザ戦争が起こってた頃に、みんながIEの設定項目で「javascript切れ」って言われてたことあったんだよね。そのあたりに根がありそうな気がする。とにかく、javascript自身が、別の（自身以外の）リソースにアクセスする場合は「保護者の同意」が必要なわけだ。それはスネ夫で言えばジャイアンを連れてくるだし、格さんであれば水戸黄門を連れてくる、っていうことなわけだ。いや、実際にはジャイアンも水戸黄門もいなくていい。その「気配」というか「虎の威」があればいいのだ。ジャイアンや水戸黄門が「委任状」を書いてスネ夫や格さんに「権利があります」を説明できればいいわけ。

まとめ

ここまでべらべらといろんな単語や言い回しをわざと使ってきて、この状態でもういっかいこれを見てみましょう。
［オリジン間リソース共有 (CORS)］(https://developer.mozilla.org/ja/docs/Web/HTTP/CORS)