当我进行 Axios POST 时，我得到 419 (未知状态) 错误

最近在使用 Axios 提交 POST 请求时，遇到了错误代码 419 (未知状态)。这让我很困惑，因为我并不知道这个错误的原因。本文将分享我的研究结果，帮助解决类似的问题。

什么是 419 (未知状态) 错误？

419 错误表示客户端的请求无法完成，因为服务器无法验证请求的身份。这通常意味着会话已过期，或者必须提供更多信息。

在 Axios 的情况下，这通常发生在使用 Laravel 框架时。Laravel 会检查表单请求中的 CSRF 令牌 (Cross-Site Request Forgery)，以确保请求来自合法的源。如果请求中没有提供令牌，或者令牌不正确，则会收到 419 错误。

如何解决 419 (未知状态) 错误？

解决 419 错误的方法有两种，具体如下：

1. 在表单中添加 CSRF 令牌。

如果您正在使用 Laravel 框架，可以在表单中添加 CSRF 令牌来避免 419 错误。使用以下代码可在表单中添加令牌：

<form method="POST" action="/foo">
    @csrf
    ...
</form>

2. 在 Axios 请求中添加 CSRF 令牌。

如果您在使用 Axios 发送 POST 请求，您可以在请求的 header 中添加 CSRF 令牌。使用以下代码可在 Axios 请求中添加令牌：

axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content')

在这个代码中，我们将 X-CSRF-TOKEN 添加到了 Axios 的 header 中，并从 HTML 页面中获取了 CSRF 令牌。

总结

419 (未知状态) 错误通常发生在使用 Laravel 框架时。这个错误是由于缺少或错误的 CSRF 令牌导致的。通过在表单或 Axios 请求中添加正确的 CSRF 令牌，我们可以避免这个错误并确保安全性。