laravel - Axios 在响应中返回 HTML 而不是数据
问题描述
我想就Axios通过Laravel在登录路由中对我的 POST 请求的响应寻求帮助。当它对用户进行身份验证(或在数据库中找到用户)时,它会在数据中返回主页的 HTML。请看下面的回复截图:
我可以要求解决我的问题吗?以下是我正在使用的必要代码和版本:
工具
VueJS:v3.0.5 Axios:0.19 Laravel:5.8
代码
登录.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>
登录控制器.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';
}
感谢您的帮助。
解决方案
如果是 ajax 请求,您可能需要告诉 Laravel 您希望将用户返回为 JSON。
您可以通过将以下内容添加到您的来做到这一点LoginController
:
protected function authenticated(Request $request, $user)
{
if ($request->ajax()) {
return $user;
}
}
您可能还需要设置X-Requested-With
通常在bootstrap.js
Laravel 附带的默认文件中设置的标头,以便 Laravel 知道这是一个 ajax 请求:
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
显然,如果该行已经存在并且您仍然在捆绑包中包含引导文件,您可以忽略它。
推荐阅读
- python - 您将如何编写计算量较小的等价物 numpy.where(np.ones(shape))
- moodle - 如何使用 R/exams 在完形填空问题中添加子问题陈述
- javascript - 使用另一个数组对固定的对象数组进行排序
- vuetify.js - Vuetify 数据表标题自定义 - “隐藏默认标题”删除了排序功能
- youtube - 如何删除 youtube 品牌、视频信息和相关视频
- firebase - Firebase 动态链接自定义参数
- vba - 在幻灯片更改时更改 PowerPoint 上的媒体音量
- c# - 在 C# 的抽象类中重载运算符(如 +、-、*、/)
- reactjs - 如果提交时未选中复选框,我正在尝试显示错误消息
- javascript - JavaScript OOP - 构造函数