Laravel + Vue.js (axios) - CSRF 令牌不匹配

Laravel

使用 Laravel 和 Vue.JS（axIOS）时，经常会遇到 CSRF 令牌不匹配的问题。这是因为 Laravel 默认开启了 CSRF 保护，以防止跨站请求伪造。在使用 Vue.JS 发送 POST 请求时，由于默认情况下并不会自动添加 CSRF 令牌到请求头中，就会导致令牌不匹配的错误。

解决这个问题的方法是，在发送 POST 请求时手动添加 CSRF 令牌到请求头中。在 Laravel 中，CSRF 令牌位于一个名为X-CSRF-TOKEN的 Meta 标签中，我们可以通过在 Vue.JS 中获取这个 Meta 标签的内容，并将其添加到请求头中，来实现 CSRF 保护的有效性。

下面是一个案例代码，演示了如何在 Laravel 和 Vue.JS 中解决 CSRF 令牌不匹配的问题：

1. 在 Laravel 中设置 CSRF 令牌

在 Laravel 的 Blade 模板中，我们可以使用 csrf 指令来生成一个包含 CSRF 令牌的 Meta 标签。在标签中添加以下代码：

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

2. 在 Vue.JS 中获取并添加 CSRF 令牌

在 Vue 组件的 created 钩子函数中，我们可以通过获取 Meta 标签的内容，并将其添加到 axIOS 的默认请求头中，从而实现自动添加 CSRF 令牌。

Javascript
import axIOS from 'axIOS';
export default {
  created() {
    const csrfToken = document.querySelector('Meta[name="csrf-token"]').getAttribute('content');
    axIOS.defaults.headers.common['X-CSRF-TOKEN'] = csrfToken;
  },
  // 其他组件代码...
}

通过以上代码，我们在每个发送 POST 请求的组件中都会自动添加 CSRF 令牌到请求头中，从而解决了 CSRF 令牌不匹配的问题。

3. 测试结果

在发送 POST 请求时，我们可以通过查看请求的请求头信息来验证是否成功添加了 CSRF 令牌。打开浏览器的开发者工具，在 Network 标签下选择对应的请求，查看请求头中的X-CSRF-TOKEN字段是否包含了正确的令牌值。

通过以上步骤，我们成功解决了 Laravel 和 Vue.JS 中 CSRF 令牌不匹配的问题。这样，我们可以安全地使用 Vue.JS 发送 POST 请求，同时保护我们的应用程序免受跨站请求伪造的攻击。