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

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

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

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

Nuxt.js

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

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

Q&A

解決済

1回答

3252閲覧

404エラーの解決ができない。

msd0624

総合スコア15

Vue.js

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

Nuxt.js

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

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

0グッド

0クリップ

投稿2020/09/01 07:34

編集2020/09/01 07:59

前提・実現したいこと

Laravel とnuxtを利用してバックエンドLaravelからのjsonをフロントエンドnuxtのaxios(get)で取得したいです。

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

ブラウザ上ではThis page could not be foundとなっています。
デベロッパーツール 上では

Failed to load resource: the server responded with a status of 404 (Not Found) GET http://localhost:3000/records/2766665e-0726-481f-8849-68281f0d2f9d 404 (Not Found)

となっています。

該当のソースコード

イメージとしては
一つ目のコードでURLからIDでfetchメソッドでaction(getOPG)を叩く→二つ目のコードでaxios(get)で取得→mutationで状態を代入する。

//nuxt.js <template> <section class="section no-top-pad"> 詳細ページ <div class="columns"> <!-- <h2 class="subtitle">{{ogpData.message}}</h2> <img src="ogpData.url" alt="">--> </div> </section> </template> <script> export default { computed: { ogpData() { return this.$store.getters["ogpData"]; }, }, async fetch({ app, store, route }) { const id = route.params.id; console.log(route); await store.dispatch("getOPG", id); return; }, }; </script>
//nuxt(store/index.js) export const actions = { async getOPG({ commit }, payload) { console.log(payload); const data = await this.$axios.$get(`/api/records/${payload}`); commit("setOGP", data); }
//nuxt.config.js axios: { // See https://github.com/nuxt-community/axios-module#options baseURL: "http://localhost:8000/", // proxy: true }, proxy: { "/api": "/" },
//Laravel(api.php) <?php use Illuminate\Http\Request; // use Illuminate\Routing\Route; Route::middleware('auth:api')->get('/user', function (Request $request) { return $request->user(); }); Route::post('/records','recordController@store'); Route::get('/records/{id}','recordController@show');
<?php namespace App\Http\Controllers; use App\Models\Record; use DB; use Exception; use Illuminate\Http\Request; use Str; use Storage; class recordController extends Controller { /** * @param $id * @return \Illuminate\Http\JsonResponse */ // public function show($id) { /** @var Record $record */ $record = Record::find($id); // dd($record); return response()->json([ 'message' => $record->message, 'area' => $record->area, 'reward' => $record->reward, 'way' => $record->way, 'time' => $record->time, 'count' => $record->count, 'url' => config('app.image_url') . '/' . $record->file_path ]); } /** * @param Request $request * @return \Illuminate\Http\JsonResponse * @throws \Throwable */ public function store(Request $request) { //省略 } }

試したこと

バックエンドでlocalhost8000でidを入れてURLにアクセスすると思い通りのjsonが表示できますのでバックエンド側は問題ないと考えてます。

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

バックエンド側でlocalhost:8000,フロントエンド側でlocalhost3000です。
laravel-corsにてAPIが処理できるようにしてあります。(postで確認済み)

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

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

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

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

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

guest

回答1

0

ベストアンサー

エラーメッセージでは

GET http://localhost:3000/records/2766665e-0726-481f-8849-68281f0d2f9d 404 (Not Found)

と出ていますが、バックエンドは localhost:8000 と書かれているのでリクエストしているURLが違っているかもしれません。

投稿2020/09/01 08:08

YakumoSaki

総合スコア2027

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問