0
0

More than 1 year has passed since last update.

ReactからRailsAPIにクッキーを送るときにはまった話

Last updated at Posted at 2021-12-13

概要

今日は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のエラーが出ないようになりました。

余談

個人的にかなり時間がかかった部分なので、記事にしてみました。
同じことで困っている人がいたら参考にしてみて欲しいです。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0