RailsAPIモードとNuxtの組みわせでハマったことStartupTechnologyの開発部が開発の裏側やノウハウをお届けします。Sorceryを使用)2019/12RailsAPIモードとNuxtの組みわせでハマったこと技術ブログ始めました!2019/12/25RailsAPIモードとNuxtの組みわせでハマったこと投稿者だいそんRailsNuxt.jsVue.jsフロントとバックエンドで分けて開発する際にクッキー・セッションベースの認証でいつも詰まるのでここに記しておきます。バージョンは下記の通りです。[x86_64-darwin18]フロントはNuxt.js。バージョンは下記の通りです。-vv12.13.1TL;DR下記を対応すればOKです。CORSの設定をするRailsはlocalhost:3001で起動、Nuxtはlocalhost:3000で起動するのでそのままAPI通信しようとするとCORS制約にかかる。(CORS)そのため、まずRails側でCORSの設定をする必要がある。Proxyの設定をするAPIを投げる時おそらくこのように投げるはず。});ただ先述の通りフロントとサーバでドメインが違うのでこのままだとhttp://localhost:3000/api/v1/sessionにリクエスト投げることになってしまう。それを解消するにはProxyの設定をする必要がある。},ここまでの設定でCORSの問題はクリアできるので正常にPOSTができるはず。セッションがうまく引き継がれないのでログイン状態が保持できない。(ログイン処理自体はうまくいっているにも関わらずセッションに値が保持されない。)下記gifのサンプルアプリではログインボタンを押すとログイン処理が行われ、成功するとマイページに飛ぶ実装にしています。マイページではログイン中のユーザーを取得して画面に表示する処理を書いています。ログイン自体はうまくいってるんのですが、マイページにてログイン中のユーザーが取ってこれてません。サーバ側でcurrent_userやsessionを覗いてみてもnil。それを解消するには次のことをやる必要があるらしいです。falseこれで無事ログインできました。サンプルリポジトリのリンクも貼っておきます。https://github.com/DaichiSaito/nuxt_example_front誰かのお役に立てれば幸いです。JeffProd.com。