为什么在Vuejs中使用Laravel 8的AJAX POST请求抛出405(不支持方法)错误

Question

我正试图用axios和jquery从Vuejs实例发出post请求，但失败了，返回错误405(不允许使用方法(。当我使用默认提交方式提交表单时，一切都很好。我搜索了一整天，但没有得到任何帮助。以下是详细信息：这是当我用axios提出请求时，我在控制台中得到的：

axios.min.js:2 GET http://localhost/Babar/unishared.it/public/doRegister 405 (Method Not Allowed)
(anonymous) @ axios.min.js:2
e.exports @ axios.min.js:2
e.exports @ axios.min.js:2
Promise.then (async)
r.request @ axios.min.js:2
r.<computed> @ axios.min.js:2
(anonymous) @ axios.min.js:2
submitRegister @ register-login.js:78
submit @ VM4754:3
invokeWithErrorHandling @ vue-dev.js:1863
invoker @ vue-dev.js:2188
original._wrapper @ vue-dev.js:7547
register-login.js:110 Error: Request failed with status code 405
at e.exports (axios.min.js:2)
at e.exports (axios.min.js:2)
at XMLHttpRequest.l.onreadystatechange (axios.min.js:2)

当我用jQueryajax方法发出请求时，这就是我在控制台中得到的。

GET http://localhost/Babar/unishared.it/public/doRegister 405 (Method Not Allowed)

route/web.php 中的我的路线

Route::post('/doRegister', [RegisterController::class,'doRegister']);

我的控制器方法：

public function doRegister(Request $request) {

$validatedData = $request->validate([
'email' => ['required','regex:/^.+@.*stu.*$|^.+@.*uni.*$/i', 'unique:AppModelsUser,email', 'max:255'],
'fname' => ['required'],
'lname' => ['required'],
'password' => ['required','confirmed'],
'password_confirmation' => ['required'],
'uni' => ['required'],
'type' => ['required'],
'degree' => ['required'],
'enrolment' => ['required'],
'year' => ['required'],
]);
$user = new User;
$user->fname = $request->input('fname');
$user->lname = $request->input('lname');
$user->email = $request->input('email');
$user->password = Hash::make($request->input('password'));
$user->uni = $request->input('uni');
$user->degree = $request->input('degree');
$user->enrolment = $request->input('enrolment');
$user->year = $request->input('year');
if($user->save())
{
event(new Registered($user));
$data = ['status' => 'success'];
}
else
{
$data = ['status' => 'failure'];
}

return response()->json($data,200);
}

我对axios的请求：

axios.post(config.siteUrl+"/doRegister/",
{
_token:config.csrfToken,
email:this.email,
lname:this.lName,
fname:this.fName,
password:this.password,
password_confirmation:this.confirmPassword,
uni:this.uni,
type:this.type,
degree:this.degree,
enrolment:this.enrolment,
year:this.year,
}
)
.then((response) => {

if(response.data.status == "success")
{                            
this.msgs.successMsg = true;
form.reset();

}
else if(response.data.status == "failure")
{
this.msgs.failureMsg = true;
}
this.spinners.registerSpinner = false;

console.log(response.data.status);
}, (error) => {
console.log(error);
});

我与jQuery的请求：

$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': config.csrfToken
}
});
$.ajax({
/* the route pointing to the post function */
url: config.siteUrl+"/doRegister/",
type: 'POST',
/* send the csrf-token and the input to the controller */
data: {
email:me.email,
lname:me.lName,
fname:me.fName,
password:me.password,
password_confirmation:me.confirmPassword,
uni:me.uni,
type:me.type,
degree:me.degree,
enrolment:me.enrolment,
year:me.year,},
dataType: 'JSON',
success: function (data) { 
console.log(data);
}
});

Answer 1

您的路由路径以/doRegister而非/doRegister/结束，但在axios请求中，您的URL为

axios.post(config.siteUrl+"/doRegister/", .... );

应该是axios.post(config.siteUrl+"/doRegister", .... );

以下是完整的axios请求

axios.post(config.siteUrl + "/doRegister", {
_token: config.csrfToken,
email: this.email,
lname: this.lName,
fname: this.fName,
password: this.password,
password_confirmation: this.confirmPassword,
uni: this.uni,
type: this.type,
degree: this.degree,
enrolment: this.enrolment,
year: this.year,
})
.then((response) => {
if (response.data.status == "success") {
this.msgs.successMsg = true;
form.reset();
} else if (response.data.status == "failure") {
this.msgs.failureMsg = true;
}
this.spinners.registerSpinner = false;
console.log(response.data.status);
}, (error) => {
console.log(error);
});