はじめに
RailsアプリケーションでPOSTリクエストを送る場合、多くの場合はform_withなどのヘルパーを利用すると思いますが、JavaScriptのみでPOSTリクエストを送らなければならないケースに遭遇しました。
本記事はこの際に発生した「401 Unauthorized」エラー対応のTIPSです。
実装
なぜエラーが発生したか
下記の様なコードでPOSTリクエストを送ると「401 Unauthorized」エラーが発生します。
1 2 3 4 5 6 7 8 9 10 11 | function testRequest(){ var xhr = new XMLHttpRequest(); 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 | function testRequest(){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (this.readyState==4 && this.status==200) { location.href = '/'; } }; var token = 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を紹介しました。
