我home.blade文件像下面
<div id="new">
<form class="form-horizontal" role="form" enctype="multipart/form-data" method="POST" v-on:submit.prevent="addPost">
<h4>@{{message}}</h4>
<div class="form-group" style="padding:14px;">
<textarea v-model="content" class="form-control" placeholder="Update your status"> </textarea><br>
<button class="btn btn-primary pull-right" type="submit">Post</button>
</div>
</form>
</div>
和我像下面VUE app.js
const app = new Vue({
el: '#new',
data: {
message: 'Update New Post:',
content: '',
},
methods:{
addPost(){
axios.post('/home/addPost', {
content: this.content
})
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
});
}
}
});
和我创建像下面web.php路线
Route::post('addPost', 'PostController@addPost');
和控制器像下面
public function addPost(Request $request) {
$content = $request->content;
$createpost = DB::table('post')
->insert(['content' => $content,
'user_id' => Auth::user()->id,
'status' => 0,
]);
}
但在控制台它会给一个错误，如下面我怎么能做出这种权利，请帮助我
app.js:11623 CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token
app.js:893 POST http://127.0.0.1:8000/home/addPost 404 (Not Found)
Error: Request failed with status code 404
at createError (app.js:918)
at settle (app.js:41630)
at XMLHttpRequest.handleLoad (app.js:792)
您需要添加数据_token领域，如果你想发送POST Ajax请求。
data: {
message: 'Update New Post:',
content: '',
_token: '{{csrf_token()}}'
},
之前，你可以对laravel的恳求，你必须CSRF令牌添加到您的请求。使用Ajax时所面临的挑战是，你必须手动指定此令牌，否则你的申请将不被接受。这种方法目前对我的作品。在你的HTML，代码加入这一行<meta name="csrf_token" content ="{!!csrf_token()!!}" />如下图所示
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My App</title>
<meta name="csrf_token" content ="{!!csrf_token()!!}" />
这个添加到您的VueJs代码的顶部：你能有今天的Vue包括在所有的请求CSRF令牌起
//App.js
Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf_token"]').getAttribute('content'); //add token;
const app = new Vue({
el: '#new',
data: {
message: 'Update New Post:',
content: '',
},
methods:{
addPost(){
axios.post('/home/addPost', {
content: this.content
})
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
});
}
}
});
存储令牌在HTML meta标签
<meta name="csrf-token" content="{{ csrf_token() }}">
在main page添加此标签