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

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

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

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

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

Q&A

解決済

2回答

12741閲覧

[Vue.js]Request failed with status code 401が解消できません[Nuxt.js]

jime1234567

総合スコア3

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

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

0グッド

0クリップ

投稿2020/12/09 06:16

編集2020/12/10 08:37

Nuxt.js初学者で技術書を見つつアプリ開発をしているものなのですが

Request failed with status code 401

というコマンドが出てローカルでアプリが開かなくなってしまいました。

発生しているエラー

ERROR Request failed with status code 401 14:56:17 at createError (node_modules\axios\lib\core\createError.js:16:15) at settle (node_modules\axios\lib\core\settle.js:17:12) at IncomingMessage.handleStreamEnd (node_modules\axios\lib\adapters\http.js:244:11) at IncomingMessage.emit (events.js:327:22) at IncomingMessage.EventEmitter.emit (domain.js:486:12) at endReadableNT (_stream_readable.js:1327:12) at processTicksAndRejections (internal/process/task_queues.js:80:21)

上記がエラーコード全文なのですが何が原因のどういうエラーなのかもわからないという状況です

また、ブラウザには

node_modules\axios\lib\core\createError.js * @param {Object} [request] The request. * @param {Object} [response] The response. * @returns {Error} The created error. */ module.exports = function createError(message, config, code, request, response) { var error = new Error(message);(この行だけグレーの背景色がついています) return enhanceError(error, config, code, request, response); };

というようなエラー文が出ています。

またChromeの検証機能でエラー元を探ったところ

Failed to load resource: the server responded with a status of 500 (RuntimeError)

というエラーが出ている状況です。

試してみたこと

このエラーについて調べてみたところAPIエラーという記事やasyncDataがおかしいというような記事を目にしたのでどこがおかしいかを調べるためサンプルコードと比較してみたのですが特におかしいところは見当たりませんでした。

また、サーバーに問題があるという記事を見かけfirebaseで新しいプロジェクトを作りそこでアプリを開こうとしましたが開けず、サーバーを再起動したら解消されたという記事があったのでサーバーを再起動してみましたがそれでも解決せずという状況です。

この問題の解決方法に心当たりのある方がいらっしゃいましたらアドバイスの方よろしくお願いいたします。

追記(質問に対する回答)

下記のコードにもある通りaxiosを使ったリクエスト送信を自分で実装していて、そのリクエスト先が認証が必要となっています。

**app/store/index.js** export const actions = { async login({ commit }, { id }) { if (id.match(/_|@|./)) { throw new TypeError('invalid username') } const user = await this.$axios.$get(`/users/${id}.json`) console.log(user) if (!user.id) throw new Error('Invalid user') commit('setUser', { user }) }, async register({ commit }, { id }) { const payload = {} payload[id] = { id } await this.$axios.$patch(`/users.json`, payload) const user = await this.$axios.$get(`/users/${id}.json`) if (!user.id) throw new Error('Invalid user') commit('setUser', { user }) }, async addLikeLogToUser({ commit }, { user, post }) { user.likes.push({ created_at: moment().format(), user_id: user.id, post_id: post.id }) const newUser = await this.$axios.$put(`/users/${user.id}.json`, user) commit('updateUser', { user: newUser }) }, async removeLikeLogToUser({ commit }, { user, post }) { user.likes = post.likes.filter(like => like.user_id !== user.id) || [] const newUser = await this.$axios.$put(`/users/${user.id}.json`, user) commit('updateUser', { user: newUser }) } }

追記

ログイン機能は以下の通り実装しております

**app/store/index.js** export const state = () => ({ isLoggedIn: false, user: null }) export const getters = { isLoggedIn: state => state.isLoggedIn, user: state => (state.user ? Object.assign({ likes: [] }, state.user) : null) } export const mutations = { setUser(state, { user }) { if (user.id.match(/_|@|./)) { throw new TypeError('invalid username') } state.user = user state.isLoggedIn = true }, updateUser(state, { user }) { state.user = user } } export const actions = { async login({ commit }, { id }) { if (id.match(/_|@|./)) { throw new TypeError('invalid username') } const user = await this.$axios.$get(`/users/${id}.json`) console.log(user) if (!user.id) throw new Error('Invalid user') commit('setUser', { user }) }, async register({ commit }, { id }) { const payload = {} payload[id] = { id } await this.$axios.$patch(`/users.json`, payload) const user = await this.$axios.$get(`/users/${id}.json`) if (!user.id) throw new Error('Invalid user') commit('setUser', { user }) },

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

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

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

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

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

guest

回答2

0

自己解決

firebaseの有効期限が切れていたため新しいプロジェクトを作成しそれとアプリを繋いだら解消されました。

投稿2020/12/11 00:24

jime1234567

総合スコア3

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

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

0

HTTPの401エラーが発生しているのではないでしょうか。

Nuxt.jsに詳しくないのですが、axiosを使ったリクエスト送信を自分で実装しているのであれば、そのリクエスト先が「認証が必要となっているか」確認してみてください。
また、その結果について追記頂けると助かります。

投稿2020/12/09 07:48

plasticgrammer

総合スコア629

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

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

jime1234567

2020/12/09 08:38

ご回答いただきありがとうございます。 追記させていただいた通りaxiosを使ったリクエスト送信を実装していて、そのリクエスト先は認証(ユーザーID)が必要となっています。
jime1234567

2020/12/09 09:04

ログイン機能はstore/index.jsで export const mutations = { setUser(state, { user }) { if (user.id.match(/_|@|./)) { throw new TypeError('invalid username') } state.user = user state.isLoggedIn = true }, updateUser(state, { user }) { state.user = user } } export const actions = { async login({ commit }, { id }) { if (id.match(/_|@|./)) { throw new TypeError('invalid username') } const user = await this.$axios.$get(`/users/${id}.json`) console.log(user) if (!user.id) throw new Error('Invalid user') commit('setUser', { user }) }, このように実装しているのですがそれとは別にauthパラメータ必要ということでしょうか?
plasticgrammer

2020/12/09 11:10

回答ではありませんが追加で確認させてください。 現在エラーが発生しているのは、状況login関数の実行時という理解で正しいでしょうか? 正しいとした場合、getでアクセスしようとしているURL(http:// ... /users/${id}.json)を直接ブラウザに入力してアクセスした際、ユーザーとパスワードの入力を求められる状況でしょうか?
jime1234567

2020/12/10 08:43 編集

login関数の実行時ではないと思われます(トップページがログインページとなっており、そのページが呼び出せていないので)。 そもそもアプリが開けず(トップページへ行けず)ユーザー登録ができないという状況です。
plasticgrammer

2020/12/10 04:35

再度の質問になりますが、 getでアクセスしようとしているURL(http:// ... /users/${id}.json)を直接ブラウザに入力してアクセスした際、ユーザーとパスワードの入力を求められる状況でしょうか?
jime1234567

2020/12/10 08:43

Cannot read property 'id' of undefinedのエラーが面が出てくるだけでユーザーとパスワードの入力を求められる状況ではありません
plasticgrammer

2020/12/10 09:00 編集

私自身勘違いしていたようですが、現在の状況としては ブラウザからアクション → /users/${id}.jsonへリクエスト送信 → サーバー側から更にどこかへリクエスト?(Request failed with status code 401) → サーバーの実行時エラー(server responded with a status of 500)としてレスポンス という理解なのですが、正しいでしょうか。 正しいとすると、/users/${id}.jsonへアクセスした際に実行されるロジック側に問題があるのだと思いますが、何かソース等ありますでしょうか。
jime1234567

2020/12/11 00:23

サーバーにfirebaseを使っていたのですが、firebaseの有効期限が切れていたようでfirebase内で新しいプロジェクトを作成しそのプロジェクトにつないだところ解消されました。 お手数をおかけいたしました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問