前提・実現したいこと
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で確認済み)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。