Laravel & Vue：尝试使用 axios 存储数据

Question

用户流程是这样的：

我正在尝试将数据保存到 laravel 后端控制器中，在路由 /api/car/store 上使用 Axios，但我收到了 401 HTTP发出请求时出错。

我认为是 Header 部分...

当我用 axios.post 发出请求时，我假设我没有正确的 header 数据。

VUE组件方法

saveCarDetails(){
    let config = {
        'Content-Type': 'application/json',
    }
    let currentObj = this;
    axios.post('/api/car/store', {
        user_id: currentObj.auth_user.id,
        car: currentObj.car
    }, config)
        .then(function (response) {
            console.log(response.data);
        })
        .catch(function (error) {
            currentObj = error;
        })
        .then(() => {
            this.errors.clear();
        })
}

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');
}

控制台错误 enter image description here

Answer 1

我认为您需要更改 RouteServiceProvider 中的中间件以使用 web 而不是 api。

Laravel & Vue：尝试使用 axios 存储数据

Laravel & Vue: trying to store data with axios

vue.js

axios

token

csrf

laravel-5.6