GETリクエストのheadersにcontent-typeを記載したせいでCROSで弾かれたって話です。
・jQueryのajaxでGETリクエスト投げて、not allowed by Access-Control-Allow-Headersのエラーなら同じ症状
・もしこんな記述を書いていたら、同じ症状
jQuery.ajax({
url:'API Addres',
type: 'get',
ContentType: 'application/json;charset=utf-8'
}上記のコードで以下のエラーが出る
Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response
GETリクエストにContentType: ‘application/json;charset=utf-8’は必要ない
上記コードの何が問題かと言うと、
jQuery.ajax({
url:'API Addres',
type: 'get',
ContentType: 'application/json;charset=utf-8'//この部分
}Content-Typeは必要ない！！！！
そもそもContent-typeの指定はPOSTリクエストの為にする
Contentーtypeはリクエストボディの中身（content）がこんな形（type）ですよ〜〜ってサーバー側に伝える記述。POSTリクエストではリクエストボディにデータを乗せてリクエストを送る為、ContentーTypeの指定が必要であるが、GETリクエストの場合はそもそもリクエストボディがない。POSTと違ってデータはパラメーターとしてサーバーに渡す。その為もちろんContentーTypeも指定する必要もない。
今回のエラーは、リクエストが余計な荷物(ContentーType)を持っていたせいで保安検査を通過できずに入国できなかったと言うことだ！！！GETのくせに余計な荷物持ってんじゃねえ！！って。
jQuery.ajax と axios の挙動・解釈の違い
この問題、なんとaxiosだと無問題でAPIアクセスできてしまう。content-typeの記述があっても保安検査が通れてしまう。
axios({
url:'API Address',
method: 'get',
headers: {
'Content-Type': 'application/json',
}
})
送られている実際のデータを検証ツールを使って確認してみると,,,
実はaxiosはGETリクエストの時はヘッダーに余計なものをつけていないことがわかった。保安検査場に行く前に手荷物検査して余計なものを捨てさせているイメージ。逆にjQuery.ajaxは指示どおりに荷造り（リクエストを組んで）出国（APIアクセス）しようとしていたわけだ。
axiosは便利だけど、本件でエラーが出ないまま先に進んでいたら学ぶこともできなかったなあ。
便利なものが世の中に溢れているけど、根本を理解しないと そのうちCoreの部分が狂って誰も直せなくて人類滅亡するんじゃないかなって思いました。
仕様書が正しいとは限らない（なんてこった）。それを判断できる知識をつける。
特に、アーリーなタイミングのゆるゆるな仕様書は当てにしちゃいけない。今回僕は仕様書に”Contentーtype〜〜〜”って書いてあったから「必要なのね」って脳死でコーディングを勧めて沼にはまった。
でもここで、使う技術の仕組みが理解できていれば、「いや、いらなくね？こうじゃね？」って判断ができたはずである。
ライブラリを使っているなら自分が書いた記述・コードは当てにならない。実際のデータ・出力をみよう
ライブラリを熟知していない限り、自分が書いたコードがどう出力されているかは未知である。入力だけではなく実際の出力も見てみよう。あれ？そうやって出力されるの？ってことがあるかもしれない。
