在生产环境中使用 Laravel 10、Inertia 和 Vue3 时解决错误 419：逐步指南

在生产环境中使用 Laravel 10、Inertia 和 Vue3 时解决错误 419

简介

在 Laravel 10、Inertia 和 Vue3 的帮助下构建 web 应用程序时，我遇到了错误 419，这是一个讨厌的问题，阻碍了应用程序在生产环境中的正常运行。本博客文章将介绍这个问题的详细信息、解决方法以及一些相关的见解。

问题

在将应用程序部署到网络服务器后，任何 get、post 或 put 调用都会返回错误 419。当尝试更新或创建产品或其他实体时，服务器会响应一条错误消息，上面写着：“抱歉，您的当前会话已过期。请重试。”

原因

错误 419 通常与 Laravel 中的 csrf 令牌相关。 csrf 令牌用于防止跨站请求伪造 (csrf) 攻击。在使用传统的表单提交时，Laravel 会自动将 csrf 令牌添加到请求中。

但是，当使用 Inertia 和 Axios 时，请求是通过 JavaScript 发出的，需要手动添加 csrf 令牌。 Inertia 使用 Axios 库，该库默认不会将 csrf 令牌添加到请求中。

解决方案

要解决此问题，我们需要向 Axios 请求中添加 csrf 令牌。有两种方法可以实现：

1. 使用 Axios 插件：

安装 axios-csrf 插件：

npm install axios-csrf

在 app.js 中配置插件：

import Axios from 'axios'
import csrf from 'axios-csrf'

// 在 axios 请求中使用 csrf 令牌
Axios.use(csrf);

2. 手动添加令牌：

如果不想使用插件，则可以在每个请求中手动添加令牌：

import Axios from 'axios'
import { getCsrfToken } from '@inertiajs/inertia-vue3'

Axios.interceptors.request.use((config) => {
  config.headers['X-CSRF-TOKEN'] = getCsrfToken();

  return config;
});

其他注意事项

除了 csrf 令牌问题外，我还在控制台中遇到了一个额外的错误：

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'firstElementChild')

此错误是由 Axios 请求中缺少 Content-Type 标头引起的。为了解决这个问题，我们需要在请求配置中添加 Content-Type 标头：

config.headers['Content-Type'] = 'application/json';

结论

通过添加 csrf 令牌和 Content-Type 标头，我能够解决错误 419 并使应用程序在生产环境中正常运行。记住在使用 Inertia 和 Axios 时手动添加 csrf 令牌非常重要，以防止 csrf 攻击。

常见问题解答

1. 什么是 csrf 令牌？
   csrf 令牌是一种用于防止 csrf 攻击的随机字符串。

2. 为什么在使用 Inertia 和 Axios 时需要手动添加 csrf 令牌？
   Inertia 使用 Axios 库，该库默认不会将 csrf 令牌添加到请求中。

3. 如何手动添加 csrf 令牌？
   使用 getCsrfToken() 函数从 Inertia 中检索令牌并将其添加到请求配置中。

4. 什么是 Content-Type 标头？
   Content-Type 标头指定请求正文的格式，对于 json 请求，应设置为 application/json。

5. 如何解决控制台中的 Cannot read properties of undefined 错误？
   添加 Content-Type 标头并将其设置为 application/json。