はじめに
RailsアプリケーションでPOSTリクエストを送る場合、多くの場合はform_withなどのヘルパーを利用すると思いますが、JavaScriptのみでPOSTリクエストを送らなければならないケースに遭遇しました。
本記事はこの際に発生した「401 Unauthorized」エラー対応のTIPSです。
実装
なぜエラーが発生したか
下記の様なコードでPOSTリクエストを送ると「401 Unauthorized」エラーが発生します。
1 2 3 4 5 6 7 8 9 10 11 | functiontestRequest(){ varxhr=newXMLHttpRequest(); xhr.onreadystatechange=function(){ if(this.readyState==4&&this.status==200){ location.href='/'; } }; xhr.responseType='json'; xhr.open('POST','/something.json',true); xhr.send(); } |
エラーが発生した理由は簡単でCSRFトークンを送っていないからです。
修正後のコード
このエラーについて、head内のCSRFトークンをリクエストヘッダに含めることで対応しました。
修正後のコードは下記のとおりです。
1 2 3 4 5 6 7 8 9 10 11 12 13 | functiontestRequest(){ varxhr=newXMLHttpRequest(); xhr.onreadystatechange=function(){ if(this.readyState==4&&this.status==200){ location.href='/'; } }; vartoken=document.getElementsByName('csrf-token').item(0).content;// 追加 xhr.responseType='json'; xhr.open('POST','/something.json',true); xhr.setRequestHeader('X-CSRF-Token',token);// 追加 xhr.send(); } |
さいごに
Railsアプリケーション内のJavaScriptのみでPOSTリクエスト送る場合のCSRFトークンの認証に関するTIPSを紹介しました。