vue.js - vue-cli 前端没有从 Sanctum 设置 CSRF cookie

Question

我正在使用 Vue 开发一个新的前端来访问我现有的 Laravel 7 应用程序，该应用程序使用 Sanctum 进行身份验证。

前端位于 app.example.com，后端移动到 api.example.com。 CORS 中间件和 Sanctum 已正确配置为允许 app.example.com，到目前为止一切顺利。

GET 到 /sanctum/csrf-cookie看起来不错，但是，它似乎并没有真正设置 cookie，导致对 API 的后续请求返回 419。

const config = { withCredentials: true };
const api = process.env.NODE_ENV === 'production' ? 'https://api.example.com' : 'http://localhost:9000';

axios.get(api + '/sanctum/csrf-cookie', config)
  .then(() => axios.post(api + '/login', data, config))
  .then(response => response.json())
  .then(response => { console.log('json', response); });

控制台日志:


来自/sanctum/csrf-cookie 的响应头:


devtools 中没有列出 cookie:


更新 1 : 之前没注意到；每个旁边的警告图标 Set-Cookie在响应 header 中显示“此 set-cookie 的域属性对于当前主机 url 无效。”

Answer 1

简答 : 不应在 cookie 域属性中指定端口。

长答案 :Laravel Sanctum 使用 VerifyCsrfToken中间件发送和验证 CSRF token ，其中 uses session config values when adding the cookie to the response :

protected function addCookieToResponse($request, $response)
{
    $config = config('session');

    if ($response instanceof Responsable) {
        $response = $response->toResponse($request);
    }

    $response->headers->setCookie(
        new Cookie(
            'XSRF-TOKEN', $request->session()->token(), $this->availableAt(60 * $config['lifetime']),
            $config['path'], $config['domain'], $config['secure'], false, false, $config['same_site'] ?? null
        )
    );

    return $response;
}

在 config/session.php :

'domain' => env('SESSION_DOMAIN', null),

在 .env :

SESSION_DOMAIN=localhost:8080

Cookies on the same host ARE NOT distinguishable by ports .因为我在 cookie 域中指定了端口，所以浏览器将 cookie 标记为具有无效域。删除端口就成功了。