419尝试发布到我的控制器时出错

时间:2019-04-21 20:05:58

标签: laravel vue.js laravel-5 vuejs2 axios

我一直在尝试使用axios向我的项目控制器提交发布请求,但我不断收到错误419(未知状态)。即使我将CSRF通过标头传递给控制器​​。发布后进入“网络”标签时,它说:

X-CSRF-TOKEN: undefined
X-Requested-With: XMLHttpRequest

但是,当我console.log(window.csrf_token)时,它会返回一个令牌。

这包含在我的layout.blade.php中

<script type="text/javascript">      
    window.csrf_token = "{{ csrf_token() }}"
</script>

我在app.js中为vue定义标题:

const axios = require('axios');

axios.defaults.headers.common = {
    'X-CSRF-TOKEN': window.csrf_token,
    'X-Requested-With': 'XMLHttpRequest',
};

在我的项目中。这是我的axios帖子请求:

Swal.queue([{
title: 'Add a New Project?',
input: 'text',
inputAttributes: {
    autocapitalize: 'on'
},
showCancelButton: true,
confirmButtonText: 'Create Project',
showLoaderOnConfirm: true,
preConfirm: (result) => {
    return new Promise(function(resolve, reject) {
        if (result) {
            console.log(result)
            axios.post('/api/projects', {title:result})
            .then(function(response){
                Swal.insertQueueStep({
                type: 'success',
                title: 'Your project has been created!'
                })
                resolve();
            })
            .catch(function(error){
                Swal.insertQueueStep({
                type: 'error',
                title: 'Something went wrong.'
                })
                console.log(error);
                reject();
            })
        }
    });
}
}])

以及ProjectsController.php中的store方法

    public function store()
    {
        $validated = request()->validate([
            'title' => 'required',
        ]);

        Project::create($validated);

        return response()->json($validated);
    }

1 个答案:

答案 0 :(得分:2)

很可能是您在使用后在布局文件中设置CSRF令牌,因此未定义的原因。

尝试使用默认方式,即在您的主模板的meta中放置一个head标签,如下所示:

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

然后使用它可以打开已设置此代码的给定bootstrap.js文件:

window.axios = require('axios');

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

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

或者如果不存在,则将其放在您的app.js脚本中或在每个页面上使用的任何脚本。