railsサーバーとのAPI通信

概要

rails で作成したサーバー との post通信でfetchを使ったときの注意点

環境

• サーバー
  • rails 4.2.4
• フロント
  • javascript

内容

railsで作成したサーバーとのAPI通信の為だけにjqueryを使うのは重いという話を聞いたのでfetchを使ってみました。

github.com

post送信するために最初に書いてみたソースコード

var data = new FormData();
data.append('', );    // post送信したいデータ
fetch('post先のURL, {
    method: 'post',
    body: data
}).then( (response) => {
    if (response.status >= 200 && response.status < 300) {
        return response.json();
    } else {
        var error = new Error(response.statusText)
        throw error
    }
}).then( (data) => {
    // 成功時に実行したい処理
}).catch( (error) => {
    // 失敗時に実行したい処理
});

上記ソースコードの場合、railsで作成したAPIサーバーと通信するためには

• headerにcsrf-tokenを追加
• cookieを追加

する必要があるようです。

修正したソースコード

var data = new FormData();
data.append('', );    // post送信したいデータ
fetch('post先のURL, {
    method: 'post',
    credentials: 'include',
    headers: {'X-CSRF-Token': document.getElementsByName('csrf-token').item(0)['content']},
    body: data
}).then( (response) => {
    if (response.status >= 200 && response.status < 300) {
        return response.json();
    } else {
        var error = new Error(response.statusText)
        throw error
    }
}).then( (data) => {
    // 成功時に実行したい処理
}).catch( (error) => {
    // 失敗時に実行したい処理
});

無事に通信できました。

参考にしたページ

qiita.com