Formとaxiosの違い. CORS

Question

htmlのFormとJavascriptのaxiosについて質問です。
ある外部のデータ管理システムを使用していて、その発行URLにデータをパラメータで送ることでデータが流し込める仕組みなのですが、
htmlのFormのactionにそのURLを設定してSubmitするとデータが流し込まれているのですが、
axiosを使用してデータを送信するとCORSで怒られてしまいます。
ここで質問なのですが、ここでの両者の違いがわかりません。
Formはなぜ、CORSに引っかからないのでしょうか？

Answer 1

それは歴史的な理由からです。

FORMはCGIと共に誕生したと言って良いと思いますが、CGIは 1993年に NCSA により策定されました。その誕生以来、一貫して、FORMはドメインやオリジンの制約はありません。

CORSの前に同一オリジンポリシー(Same Origin Policy)について触れる必要があります。同一オリジンポリシーは、異なるサイトに対してJavaScriptアクセスができると脆弱性になることから、それを制限するために設けられた制約です。英語版WikiPediaによると、同一オリジンポリシーの誕生は1995年です。

一方、JavaScript向けのAPIが発達するにつれて、オリジンを超えてJavaScriptによるアクセスを許可したいというニーズが高まりました。このため、同一オリジンポリシーを緩める形で、CORSが制定されました。CORSの仕様書草稿は2006年に作られましたが、正式に承認されたのは2014年ですので、ウェブの歴史から見ると比較的最近です。
そして、axiosはJavaScriptで動きますから、JavaScriptの制限はaxiosでも有効です。

元の質問に返りますと、FORMは同一オリジンポリシーやCORSよりも先に誕生したので、互換性の理由から、ドメインやオリジンの制約は設けられていない、というのが「Formはなぜ、CORSに引っかからないの」かの理由です。

Comments

[2_34_koki]

なるほど。詳しい説明ありがとうございました。そんな、歴史の背景があったんですね。

Answer 2

その前にformでも普通にPOSTできてる時点でCSRFの危険があるのでは…。

これの回答にはWebセキュリティの長い歴史の話が必要なので自分で調べてもらうか詳しい人の回答を待つしかない。
1990年代からの大量のCSRFやXSSの被害の上で
それでもJSからクロスサイトでアクセスしたいのでCORSの仕様ができた。