概要
今日はReactからRailsAPIにクッキーを送信する際にはまったことがあるのでそのときにどう対処したかを簡単に説明します。フロントエンド側は簡単だったのですが、バックエンド側の方の記述に手間取ったのでメモしておきます。
cors (closs origin resourse sharing)のエラーがずっと出てしまっていました。API通信にはaxiosを使用しております。
フロントエンド
(例)
axios.post(
'http://localhost:3001/users',
answers,
{ withCredentials: true},
)
このようにしてaxiosの引数を一つ追加して、{ withCredentials: true}
とするだけで良いです。
実際にCookieが送れてているかどうかはGoogleChromeの検証モードで確認できます。
こちらの記事を読んでみてください。
バックエンド
corsのエラーがこのままだと出てしまうので、バックエンド側の編集も必要になります。
cors.rbのresourseの部分にcredentials: true
の記述を追加してください。
(例)
#略
allow do
origins 'http://localhost:3000'
resource '*',
#略
credentials: true(この行を追加してください)
end
#略
これを追加するとcorsのエラーが出ないようになりました。
余談
個人的にかなり時間がかかった部分なので、記事にしてみました。
同じことで困っている人がいたら参考にしてみて欲しいです。