时间戳

首页 > 解决方案 > 尝试发布到我的控制器时出现 419 错误

laravel - 尝试发布到我的控制器时出现 419 错误

问题描述

我一直在尝试使用 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',
};

在我的 projects.vue 中，这是我的 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);
    }

标签： laravelvue.jslaravel-5vuejs2axios

解决方案

很可能您在使用后在布局文件中设置了 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脚本或您在每个页面上使用的任何内容中。

推荐阅读