前提・実現したいこと
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
試したこと
原因が
- Railsのroutes.rbにroot
/
のルーティングが存在しない。(APIモードなので当然だと思っていましたが)、かつproductionでは初期画面であるWelcomeページが描画されないため、productionで落ちる。 - 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
どなたかご存知の方助けていただけないでしょうか。
宜しくお願いいたします。
あなたの回答
tips
プレビュー