質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

0回答

576閲覧

nuxt.jsからaxiosを使ってRailsAPIモードへの"/"がproduction環境だと404で落ちる

sh12

総合スコア0

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

0クリップ

投稿2020/07/15 14:54

前提・実現したいこと

nuxtとrailsのAPIモードにて、axiosとfirebaseを利用してログイン機能・及ログイン保持機能を作っています。

pluginにaxios.jsとauth-check.jsというファイルを配置し、auth-check.jsにてfirebaseとの疎通と、
サーバサイドへのAPIを叩いてチェックし、vueXにログイン状態を保持するという仕組みを作っています。

しかし、developmentではうまく機能するのですが、railsをproductionとしてデプロイすると以下のようなエラーとなり、困っています。

最終的に、nuxt-rails間のAPIをエラーなく疎通させたいです。

発生している問題・エラーメッセージ

Error: Request failed with status code 404 at createError (webpack-internal:///./node_modules/axios/lib/core/createError.js:16) at settle (webpack-internal:///./node_modules/axios/lib/core/settle.js:17) at XMLHttpRequest.handleLoad (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:61) vue__WEBPACK_IMPORTED_MODULE_18__.default.config.errorHandler @ webpack-internal:///./.nuxt/client.js:148

該当のソースコード

plugins/axios.js import axios from "axios"; export default axios.create({ baseURL:'http://localhost:3000/' })
plugins/auth-check.js import firebase from "@/plugins/firebase" import axios from "@/plugins/axios" const authCheck = ({ store, redirect }) => { firebase.auth().onAuthStateChanged(async user => { if (user) { const { data } = await axios.get(`/v1/users?uid=${user.uid}`); if(data){ data.isLoggedIn = true; } store.commit("login", data); } else { store.commit("login", null); } }); } export default authCheck

試したこと

原因が

  1. Railsのroutes.rbにroot/のルーティングが存在しない。(APIモードなので当然だと思っていましたが)、かつproductionでは初期画面であるWelcomeページが描画されないため、productionで落ちる。
  2. axios.create()にて、baseURLに一度アクセスしにいってしまっている。

試したことが、
以下のようなaxios.jsにしましたが、今度はauth-check.jsにてaxiosが読み込めないという自体が発生しました・・・。

plugins/axios.js export default function({ $axios, redirect }) { $axios.setToken("access_token") $axios.onResponse(config => { $axios.setHeader("Access-Control-Allow-Origin", "*") }) }

補足情報(FW/ツールのバージョンなど)

node:12.5.0-alpine
@nuxtjs/axios : "^5.9.0"
nuxt: "^2.0.0"
ruby: '2.6.3'
rails: 5.2.4.3

どなたかご存知の方助けていただけないでしょうか。
宜しくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問