以前に「Reactでaxios経由でAWS API Gatewayからデータ取得しようとする時にCORSでエラーになる」という記事を書きました。
最終的にGETではうまくいっていたのですが、AWS APIGateway+ LambdaをProxy統合で利用していた場合、POSTで同じようにaxiosでデータを取得しようとすると、再びCORSエラーが発生してしまいました。
そこで、今回はPOSTの場合の原因と対応方法について追加で調査しました。
1. POSTの場合のエラー内容
まずは、エラーの内容です。
XMLHttpRequest cannot load http://xxxxxx. Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.preflight responseが発生してエラーになってしまっているようです。
2. Preflight request とは？
Preflight request (プリフライトリクエスト)ですが、ブラウザのCORS仕様の一部で、実際のリクエストを送信する前に、そのリクエストが安全かどうか、前もってOPTIONSリクエストを送信して確かめる仕様です。
このOptionリクエストがCORSエラーとなってしまうのです。
Preflight requestは「単純リクエスト」でない場合に発生します。
細かいところは割愛しますが、「単純リクエスト」は以下の様に定義されます。
GET,HEAD,POSTのうちいずれか- ヘッダーに含まれるのが以下のうちいずれか
- ユーザーエージェントによって自動的に設定されたヘッダー
- Accept
- Accept-Language
- Content-Language
- Content-Type
- Content-Typeのヘッダーが以下のうちいずれか
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
- リクエストに使用されるどの XMLHttpRequestUpload にもイベントリスナーが登録されていないこと。
- リクエストに ReadableStream オブジェクトが使用されていないこと。
3. POSTでCORSエラーの原因
どうもaxiosでPOSTを実行しようとすると、Content-Typeが「application/json」として通信が発生しているようです。
つまり、上の定義でいうところの「Content-Typeのヘッダーが以下のうちいずれか」にマッチしなくなってPreflight requestが発生しています。
4. 対応方法
axiosでリクエストする際のヘッダーに「”Content-type”: “text/plain”」として指定してあげます。
こんな感じで引数にheaderの値を指定します。
const onClickGet = () => {
console.log(urlAPI)
axios.post<[]>(urlAPI + "/asin",
datas,
{ headers: { "Content-type": "text/plain" } }
)
.then((res) => {
console.log(res.data);
setStatus(res.data);
}).catch((error) => {
console.log(error);
});
}そうすることで、 Preflight request が発生しなくなって、正常にアクセスできるようになりました。
Pythonのオススメ勉強方法
私がオススメするPythonの効果的な学習方法は「Udemy(ユーデミー)」によるビデオ学習です。
「Udemy」は、オンライン学習の提供サイトです。学びたい人は多くある講座の中から受講したいコースを選択することができ、動画で学べるのが特徴です。
多くあるPythonのコースの中でもオススメするPythonのコースは以下となります！！
現役シリコンバレーエンジニアが教えるPython 3 入門 + 応用 +アメリカのシリコンバレー流コードスタイル
このコースでは合計で28.5時間のビデオ講座があって、それらを受講するだけで、Pythonの基礎から応用まで学ぶことができます。
私も購入して受講していますが、内容としては初心者の方から上級者まで対応する幅広い内容になっています。
下手な書籍を何冊か購入するより、この動画コースを最初からじっくりと受けることで総合的なスキルを習得することができるできます。おそらくこれ以上の教材はないと思いますので、絶対おすすめです。
今回は以上となります。
コメント