【JavaScript】単純リクエストを飛ばすことでpreflightでのエラーを回避する（突貫工事）

困ったこと

状況

HTMLにJavaScriptを組み込み、XMLHttpRequestを使い外部のAPIを叩きたかった。
（HTTPメソッドはPOST。ヘッダーにはContent-Typeとしてapplication/xmlを指定）
動作確認のため、このHTMLをGoogle Chromeで開き、JSを実行してみた。

結果

APIのレスポンスを得られなかった。Chromeの開発者ツールでコンソールを見てみると、
「 preflight に失敗しました」という内容のエラーが出ていた。
（エラーメッセージをコピペし忘れました）

調査内容

• preflightは、実際のリクエスト前に、クライアントがサーバーから通信許可を得るために行われるもの
• preflightは、実際のリクエストが 単純リクエスト ではない（かつCORS）の場合に行われる
• preflightのエラーの突破策は以下
  1. リクエストを単純リクエストとすることでpreflightが行われないようにする
  2. APIのレスポンスをいい感じに修正する

※単純リクエストについてはこちら

解決

今回は接続先が外部のAPIであり、そのレスポンスを修正することは不可能。
よって2.ではなく1.の突破策を選択。

リクエストヘッダーのContent-Typeをapplication/xmlからtext/plainにすることで解決した。
（ application/xmlが単純リクエストの条件から外れていた ）