Nextjs对接Laravel后端出现419 XHR错误，如何解决？

问题核心 #

419错误在Laravel场景下几乎都是CSRF令牌验证失败导致的。Postman能正常调用是因为它默认不处理会话Cookie，而Laravel Sanctum要求前端必须携带有效的CSRF令牌和会话Cookie才能通过接口验证。

具体修复步骤 #

1. 修正Laravel配置项 #

• 打开.env文件，确保SESSION_DOMAIN和SANCTUM_STATEFUL_DOMAINS匹配你的前端域名：
  比如前端是localhost:3000、后端是localhost:8000，则设置：

  SESSION_DOMAIN=localhost
  SANCTUM_STATEFUL_DOMAINS=localhost:3000
  

• 检查config/cors.php，将supports_credentials设为true，同时allowed_origins包含你的前端域名。

2. 调整Axios请求代码 #

你的现有代码存在两个关键错误：sanctum/csrf-cookie是GET请求而非POST，且withCredentials被错误放在了请求体中，正确写法如下：

export const postLogin = async (data: any) => {
    try {
        // 修正：用GET请求获取CSRF Cookie，withCredentials放在配置项里
        await axiosCrmClient.get("sanctum/csrf-cookie", {
            withCredentials: true,
        });
        const response = await axiosCrmClient.post("login", data, {
            headers: {
                Accept: "application/json",
                'Content-Type': "application/json",
            },
            withCredentials: true,
        });
        return response;
    } catch (err: any) {
        console.log(err);
    }
};

3. 全局配置Axios实例 #

建议在创建axiosCrmClient时全局开启withCredentials，避免每个请求重复设置：

import axios from 'axios';

const axiosCrmClient = axios.create({
    baseURL: 'http://你的Laravel后端域名',
    withCredentials: true,
});

export default axiosCrmClient;

4. 清理浏览器缓存 #

手动清除浏览器对应域名的Cookie和缓存，避免旧的无效会话数据干扰验证。

内容的提问来源于stack exchange，提问作者Konul Memmedova