Ajax通信ができない（AxiosErrorが起こる）
Q&A
Closed
解決したいこと
データ分析画面で分析するデータの期間をフォームから選択して分析ボタン押すとAjax（Axios）通信によってその期間をコンソールに出力する。
その際にエラーが起こってしまいます。
解決方法を教えて下さい。
画面レイアウト
開発環境
フロントエンド
vue.js 3.2
Inertia.js 1.0
バックエンド
Laravel 9.52.16
発生している問題・エラー
Analysis.vue?t=1717546741599:37 GET http://localhost:8000/api/analysis/?startDate=2024-06-18&endDate=2024-06-19&type=perDay 401 (Unauthorized)
AxiosError {message: 'Request failed with status code 401', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
該当するソースコード
Analysis.vue
<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import { Head } from '@inertiajs/vue3';
import { reactive, onMounted } from 'vue';
import { getToday } from '@/common';
import axios from 'axios';
//今日の日付を取得する
onMounted(() => {
form.startDate = getToday()
form.endDate = getToday();
})
//フォームの値を取得する
const form = reactive({
startDate: null,
endDate: null,
type: 'perDay'
})
//分析ボタンを押したときにAjax通信が起こる
const getDate = async () => {
try {
const response = await axios.get('/api/analysis/', {
params: {
startDate: form.startDate,
endDate: form.endDate,
type: form.type
}
});
console.log(response.data);
} catch (error) {
console.error(error);
}
};
</script>
<template>
<Head title="データ分析" />
<AuthenticatedLayout>
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">データ分析</h2>
</template>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 text-gray-900">
<form @submit.prevent="getDate">
From: <input type="date" name="startDate" v-model="form.startDate">
To: <input type="date" name="endDate" v-model="form.endDate"><br>
<button class="mt-4 flex mx-auto text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg">分析する</button>
</form>
</div>
</div>
</div>
</div>
</AuthenticatedLayout>
</template>
api.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Api\AnalysisController;
Route::middleware('auth:sanctum')
->get('/analysis', [ AnalysisController::class, 'index'])
->name('api.analysis');
↓こちらは元から変更していませんが念のため記載しておきます。
RouteServiceProvider.php
<?php
/* ここまで省略
RouteServiseProviderクラスのbootメソッド */
public function boot()
{
$this->configureRateLimiting();
$this->routes(function () {
Route::middleware('api')
->prefix('api')
->group(base_path('routes/api.php'));
Route::middleware('web')
->group(base_path('routes/web.php'));
});
}
//以下省略
web.php
<?php
use App\Http\Controllers\AnalysisController;
Route::get('analysis', [AnalysisController::class, 'index'])->name('analysis');
AnalysisContoroller.php
<?php
namespace App\Http\Controllers\Api;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Http\Response;
class AnalysisController extends Controller
{
public function index(Request $request)
{
// dd関数が実行されなかった
dd($request);
return response()->json([
'data' => $request->startDate
], Response::HTTP_OK);
}
}
自分で試したこと
・DevToolsのconsoleタブ確認
・DevToolsのnetwookタブ確認
config→headerの中に X-XSRF-TOKEN（Inertia側のトークン）は確認できましたが、CSRF（Laravel側のトークン）は確認できなかった。
・AnalysisContoroller.phpでdd関数を記述
dd関数が実行されなかったので、コントローラーに渡される前のLaravel側の認証がうまくできてないのではないかと考えています。
・Chatgptで聞いてみました。
401エラーは認証エラーということがわかりました。
Chatgpが答えたコードを追記しました。
エラーは解消されませんでした。
1
