解决 Vue.js + Laravel Sanctum CSRF 令牌不匹配错误：逐步指南
2024-03-05 22:40:49
Vue.js + Laravel Sanctum：解决 CSRF 令牌不匹配的 419 错误
引言
在 Vue.js 前端应用程序与 Laravel 后端框架集成的过程中，CSRF（跨站请求伪造）令牌不匹配可能导致令人沮丧的 419 错误。本文将深入探讨此问题的根源，并提供逐步的解决方案来解决此错误，确保应用程序的安全性和无缝的用户体验。
理解 CSRF 令牌不匹配
CSRF 令牌是一种安全机制，可防止恶意网站伪造请求，执行未经授权的操作。当用户从一个网站访问另一个网站时，CSRF 令牌用于验证请求是否来自受信任的来源。
在 Vue.js + Laravel 的上下文中，如果发送到后端的请求中包含的 CSRF 令牌与服务器生成的令牌不匹配，则会触发 419 错误。
解决 CSRF 令牌不匹配
1. 检查会话和 CSRF 设置
- 确保 Laravel 的
SESSION_DOMAIN设置为前端应用程序的域名。 - 在 Laravel 的
.env文件中将SANCTUM_STATEFUL_DOMAINS设置为前端应用程序的域名。
2. 配置 CORS
- 允许来自前端应用程序域名的请求，方法是在 Laravel 的
config/cors.php文件中配置 CORS（跨域资源共享）。
3. 配置 Axios（Vue.js）
- 在 Vue.js 应用程序中，将 Axios 配置为在所有请求中包含凭据和 CSRF 令牌。
4. 获取 CSRF 令牌
- 使用 Axios 向
/sanctum/csrf-cookie端点发送 GET 请求以获取 CSRF 令牌。 - 将获取的令牌存储在 Vuex 存储或应用程序状态中。
5. 包含 CSRF 令牌
- 在发送到后端的任何 POST 请求中，将获取的 CSRF 令牌包含在请求头中。
代码示例
Vue.js 前端应用程序：
axios.interceptors.request.use((config) => {
config.baseURL = 'http://127.0.0.1:8000';
config.withCredentials = true;
return config;
});
axios.get('/sanctum/csrf-cookie').then(() => {
axios.post('/login', {
email: 'example@example.com',
password: 'secret'
});
});
Laravel 后端应用程序：
Kernel.php：
'api' => [
\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
'throttle:api',
\Illuminate\Routing\Middleware\SubstituteBindings::class,
],
User.php：
use Laravel\Sanctum\HasApiTokens;
class User extends Authenticatable
{
use HasApiTokens, HasFactory, Notifiable;
//...
}
config/session.php：
'domain' => '.example.com'
config/cors.php：
'paths' => [
'api/*',
'sanctum/csrf-cookie',
'register',
'login',
],
'allowed_origins' => ['*'],
结论
通过遵循这些步骤，可以有效解决 Vue.js + Laravel Sanctum CSRF 令牌不匹配的 419 错误。通过确保 CSRF 令牌的有效性，应用程序将受到恶意请求的保护，同时为用户提供顺畅的身份验证体验。
常见问题解答
1. 为什么在 Vue.js 应用程序中必须获取 CSRF 令牌？
CSRF 令牌有助于防止跨站请求伪造，这是恶意网站滥用可信网站的漏洞。
2. 如何配置 CORS 以允许跨域请求？
在 Laravel 的 config/cors.php 文件中，将 paths 和 allowed_origins 设置为允许来自前端应用程序域名的请求。
3. 如何确保 CSRF 令牌与后端生成的令牌匹配？
请确保会话和 CSRF 设置正确，并且前端应用程序在所有请求中都包含有效的 CSRF 令牌。
4. 是否还有其他方法可以解决 CSRF 令牌不匹配错误？
可以使用 JWT（JSON Web 令牌）等替代方法，但 CSRF 令牌在简单性、安全性以及易于实现方面仍然是首选。
5. 为什么 CSRF 令牌不匹配错误仅在使用 Sanctum 时发生？
Sanctum 是一种无状态的身份验证解决方案，它不存储用户会话信息。因此，必须通过 CSRF 令牌进行额外的验证。
