Rails+AxiosでCSRF対策用のトークンを使う設定

Rails+WebpackerのJavaScriptでAxiosを使うときは、POSTやPATCHで送信する際にCSRF対策用のトークンを指定する必要があります。送信のたびに指定するのは面倒なので、あらかじめ設定しておきましょう。

AxiosのInterceptorsの機能を使います。送信前にHTTPメソッドがPOST, PUT, PATCH, DELETEだったら、meta要素からトークンを取り出してHTTPヘッダにセットします。ここではjQueryを使っています。

サンプル: https://github.com/kazubon/blog-rails6-vuejs

app/javascript/axios_config.js

import Axios from 'axios';

Axios.interceptors.request.use((config) => {
  if(['post', 'put', 'patch', 'delete'].includes(config.method)) {
    config.headers['X-CSRF-Token'] = $('meta[name="csrf-token"]').attr('content');
  }
  return config;
}, (error) => {
  return Promise.reject(error);
});

このJavaScritptをどこかで動かします。とりあえずapplication.jsに入れとけばいいでしょう。

app/javascript/packs/application.js

import '../axios_config';

あとは、ふつうにAxiosが使えます。

import Axios from 'axios';

Axios.post('/entries.json', { entry: this.entry });