Question

我的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>

和我的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)

Answer 1

如果要发送ajax后请求，则需要在数据中添加_token字段。

data: {
        message: 'Update New Post:',
        content: '',
         _token: '{{csrf_token()}}'
    },

Answer 2

在向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);
            });
        }
    }
});

Answer 3

令牌存储在一个HTML元标记

<meta name="csrf-token" content="{{ csrf_token() }}">

将此标签添加到main page

docs：csrf-x-csrf-token

使用VueJs在laravel中找不到CSRF错误

3 个答案: