FrontEnd

JavaScriptのみでPOSTした場合のCSRFトークンの認証に関するTIPS

投稿日:

はじめに

RailsアプリケーションでPOSTリクエストを送る場合、多くの場合はform_withなどのヘルパーを利用すると思いますが、JavaScriptのみでPOSTリクエストを送らなければならないケースに遭遇しました。
本記事はこの際に発生した「401 Unauthorized」エラー対応のTIPSです。

実装

なぜエラーが発生したか

下記の様なコードでPOSTリクエストを送ると「401 Unauthorized」エラーが発生します。

エラーが発生した理由は簡単でCSRFトークンを送っていないからです。

修正後のコード

このエラーについて、head内のCSRFトークンをリクエストヘッダに含めることで対応しました。
修正後のコードは下記のとおりです。

さいごに

Railsアプリケーション内のJavaScriptのみでPOSTリクエスト送る場合のCSRFトークンの認証に関するTIPSを紹介しました。

page_footer_responsive




-FrontEnd
-

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

Vue.js入門その7〜セレクトボックスを動的に変更してみる〜

1 はじめに1.1 サンプル2 とりあえず作ってみる2.1 ソースコード2.2 セレクトボックスにv-modelでバインド2.3 <option>はv-forでリストレンダリング2.4 メ ...

もうすぐ登場!Vue 3の変更点まとめ

1 はじめに2 仕様変更2.1 複数のv-modelが定義可能に2.2 template直下に複数のタグを記述可能に2.3 開始処理がcreateAppに2.4 scoped cssの仕様変更2.5 ...

react-icon

React Hook Form (v7) とMUI (v5) だけでバリデーションを実装

1 はじめに2 バリデーションエラーをMUIのhelperTextに表示する2.1 バリデーション実装の全体感3 他のフィールドに関連するバリデーション4 CodeSandbox5 さいごに6 おすす ...

react-icon

[React初心者]カスタムフックについて学ぶ

1 はじめに2 Ract Hook(フック)とは3 カスタムフックの実装3.1 フックのルール3.2 カスタムフック3.3 カスタムフックの実装4 さいごに5 おすすめ書籍 はじめに 今回はReact ...

JQueryでformにinput要素を足していく

はじめに 最近個人的にディープラーニングの勉強をしているtonnyです。 ディープラーニングの勉強がてら、好きな麻雀に関するWebアプリを作成してみました。 今回はその作成の中で、今まであまりやってこ ...

フォロー

blog-page_side_responsive

2018年5月
 12345
6789101112
13141516171819
20212223242526
2728293031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。