Axios 在响应中返回 HTML 而不是数据

Question

我想通过 Laravel[= 寻求有关 Axios 对我的 POST 请求的响应的帮助 Laravel。它在对用户进行身份验证时（或在数据库中找到用户）在数据中 returns HTML 的主页。请看下面的回复截图：

我可以请求解决我的问题吗？以下是必要的代码和我正在使用的版本：

工具

VueJS：v3.0.5 公理：0.19 Laravel: 5.8

代码

Login.vue（脚本）

import axios from 'axios'

export default {
    data() {
        return {
            csrfToken: '',
            loginObj: {
                username: '',
                password: '',
                remember: false,
            },
            message: '',
        }
    },
    created() {
        this.csrfToken = document.querySelector('meta[name="csrf-token"]').content;
    },
    methods: {
        signIn() {
            console.log(this.loginObj)

            axios.post('login', this.loginObj).then(res => {
                console.log(res)
            })
            .catch(error => {
                console.log(error.response)
            })
        }
    }
}

Login.vue（模板）

<div class="card shadow-lg border-0 rounded-lg mt-5">
    <div class="card-header bg-orange"><h3 class="text-center my-4">Hello!</h3></div>
    <div class="card-body p-0">
        <div class="row">
            <div class="col-lg-6 d-none d-lg-block">
                <div class="login-image-wrap text-center">
                    <img src="/img/ahrs_logo_trans.png" class="login-img" alt="AKB Logo">
                </div>
            </div>
            <div class="col-lg-6">
                <div class="p-5">
                    <div class="text-center">
                        <h1 class="h4 text-gray-900 mb-4">Sign In</h1>
                    </div>
                    
                    <form name="loginForm" @submit.prevent="signIn">
                        <input type="hidden" name="_token" :value="csrfToken">
                        <div class="form-group">
                            <label class="small mb-1" for="inputUsername">Username</label>
                            <input class="form-control py-4" v-model="loginObj.username" id="inputUsername" type="text" placeholder="Enter username" required autofocus>
                        </div>
                        <div class="form-group">
                            <label class="small mb-1" for="inputPassword">Password</label>
                            <input class="form-control py-4" v-model="loginObj.password" id="inputPassword" type="password" placeholder="Enter password" required>
                        </div>
                        <div class="form-group">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="remember" id="remember" v-model="loginObj.remember">

                                <label class="form-check-label text-small" for="remember">
                                    Remember Me
                                </label>
                            </div>
                        </div>
                        <div class="form-group d-flex align-items-center justify-content-between mt-4 mb-0">
                            <a class="small" href="password.html">Forgot Password?</a>
                        </div>
                        <hr />
                        <div>
                            <button type="submit" class="btn bg-yellow btn-block font-weight-bold">LOGIN</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

LoginController.php

use AuthenticatesUsers;

/**
 * Where to redirect users after login.
 *
 * @var string
 */
protected $redirectTo = '/home';

/**
 * Create a new controller instance.
 *
 * @return void
 */
public function __construct()
{
    $this->middleware('guest')->except('logout');
}

// override in the AuthenticatesUsers function username()
public function username()
{
    return 'username';
}

感谢您的帮助。

Answer 1

如果是 ajax 请求，您可能需要告诉 Laravel 您想要 return 用户作为 JSON。

您可以通过将以下内容添加到您的 LoginController 来执行此操作：

protected function authenticated(Request $request, $user)
{
    if ($request->ajax()) {
        return $user;
    }
}

您可能还需要设置 X-Requested-With header 通常在 Laravel 附带的默认 bootstrap.js 文件中设置，以便 Laravel知道这是一个 ajax 请求：

axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

显然，如果这一行已经存在并且您仍然在您的包中包含 bootstrap 文件，您可以忽略它。