apiから値を取得しようとするもなぜかhtmlのような値が返ってくる場合

2022年4月24日 2022年4月25日

axios.get('/api/hogehoge) でapiから値を取りたいのに、戻り値がこんな風になる。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="csrf-token" content="hLBaqxbg5QiEuL0AenaYsyMqw9tP5fabFpgv2DjR">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
   
    <title>Example</title>
<link rel="stylesheet" href="/css/app.css">
</head>
<body onfocus="top.focus()">
    <div id="app">
        <App />
    </div>

<script src="/js/app.js"></script>
</body>
</html>

postとgetを間違えている

例えばLaravelでapi.phpを使っているなら

Route::post('/customers/archive', [CustomerController::class, 'show']);
//↓
Route::get('/customers/archive', [CustomerController::class, 'show']);

これで解決

/api/が抜けてる

これもバックエンドがLarvelの例だが、フロント側の呼び出し方に問題があるパターン。

axios.get('/api/authorinfo')
    .then(response => {
        console.log(response)
    })        
//↓
axios.get('/api/authorinfo')
    .then(response => {
        console.log(response)
    })

aip.phpを使うなら、/api/が必須。