Laravel与Vue.js中CSRF Token不匹配问题：Axios POST请求无效排查

我来帮你排查下这个问题，看了你的代码后，发现有几个关键问题导致CSRF Token验证失败：

问题分析 #

• 重复引入Axios引发冲突：你先通过import Axios from 'axios'引入了Axios，紧接着又用window.axios = require('axios')重新赋值，这会覆盖之前的实例，还会和Laravel默认bootstrap.js里的Axios配置产生冲突。
• CSRF Token选择器错误：你在获取meta标签时用了"（HTML实体编码），JavaScript无法识别这个符号，自然匹配不到name="csrf-token"的meta标签，也就拿不到正确的Token值。
• 粗暴覆盖默认请求头：直接给window.axios.defaults.headers.common赋值新对象，会完全替换掉Laravel默认bootstrap.js里已经配置好的请求头（包括原本的CSRF Token设置），而不是追加新的头信息。

解决方案 #

既然你提到Laravel的bootstrap.js已经配置了CSRF相关内容，那我们直接复用这个配置就好，不需要重复造轮子：

1. 复用Laravel默认的Axios配置 #

Laravel的bootstrap.js默认已经帮你做了这些事：

window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
// 还会自动通过csrf-token meta标签设置Token

所以你不需要再重复编写Axios的基础配置，只需要确保在Vue代码前引入了bootstrap.js。

2. 正确挂载Axios到Vue原型 #

在你的Vue入口文件（比如app.js）里，只需要把已配置好的window.axios挂载到Vue原型：

// 先引入Laravel的bootstrap.js
require('./bootstrap');

import Vue from 'vue';

// 直接挂载现成的Axios实例
Vue.prototype.$http = window.axios;

3. 修正请求路径 #

你的POST请求用了相对路径'store'，很可能会指向错误的路由地址，建议使用绝对路径或者Laravel的路由命名（需要先引入laraveloute包）：

// 方法1：使用绝对路径
this.$http.post('/your-route-path/store', { email: this.email })

// 方法2：使用路由命名（需先安装laraveloute）
this.$http.post(route('your-route-name'), { email: this.email })

4. 确保页面存在CSRF Meta标签 #

在你的Blade模板里，必须包含Laravel默认生成的CSRF meta标签：

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

最终可用的代码示例 #

app.js（Vue入口文件）

require('./bootstrap');

import Vue from 'vue';

Vue.prototype.$http = window.axios;

const app = new Vue({
    el: '#app',
    data() {
        return {
            email: ''
        };
    },
    methods: {
        onSubmit(event) {
            event.preventDefault();
            this.$http.post('/newsletter/store', { email: this.email })
                .then(res => {
                    console.log(res.data.newsletter_success);
                })
                .catch(err => {
                    console.error(err);
                });
        }
    }
});

内容的提问来源于stack exchange，提问作者Aspile Inc