未为使用Laravel Sanctum和Angular的跨域请求设置CSRF Cookie 概述

我有一个本地托管的基于Laravel的api和一个正在提供服务的Angular 9.2 SPA。我最近安装了Laravel Sanctum进行身份验证，并遵循中列出的SPA说明，但CSRF令牌未附加到SPA的请求，因此我收到CSRF令牌不匹配错误

按照指示，在随后尝试登录之前，我首先调用了

//abc.api.hydrogen.local/sanctum/csrf

：

this.http.get('sanctum/csrf-cookie')
    .pipe(
        switchMap(result => this.http.post('auth/login', {'email': email, 'password': password}))
    );

注意：我有一个拦截器，它在请求url前面加上api url“//abc.api.hydrogen.local/”，例如，“SANCUTUM/csrf cookie”将变成“//abc.api.hydrogen.local/SANCUTUM/csrf cookie”

来自sanctum/csrf cookie的响应将返回预期的标头：

Access-Control-Allow-Credentials: true
Set-Cookie: XSRF-TOKEN=eyJpdiI6Ilc3UkRLR1BSZ29TWVh3ZWZEQ3Y4aGc9PSIsInZhbHVlIjoiRUZBZXNFWTlZbWo5QWhIeWsrRmpjNUZVWkExSGtaT1hzUTVnSXpoaGQ4c3dFc2VLNjZsUHlUVWFmbG1uVVdKZSIsIm1hYyI6ImU1ZTAxNGFmMjAwNWRiMDhiODFjMGZhYTljYmU1NmRjYTUzYTNmNDJjNWM3YmQyM2FkY2I2OGYwNjYzNGU2MjkifQ%3D%3D; expires=Thu, 30-Apr-2020 13:35:06 GMT; Max-Age=7200; path=/; domain=localhost
Access-Control-Allow-Origin: http://localhost:8100

然而，当我查看浏览器控制台时，我没有看到在存储>cookies中设置的任何内容。此外，对“login/”的后续调用没有附加cookie，我收到了一个CSRF令牌不匹配错误

我已经阅读了许多详细说明类似问题的帖子，并实施了他们的建议和配置，包括以下内容：

拉韦尔API

• 在.env中，我设置了SESSION\u DRIVER=cookie和SESSION\u DOMAIN=localhost:8100
• 在config/sanctum中，我将localhost:8100添加到有状态域中
• 在config/cors中，我设置了supports\u credentials=true并允许所有路径、头和源（使用“*”值）

角水疗

• 我已经实现了一个全局拦截器，该拦截器将所有请求设置为withCredentials=true
• 我已确保我的api调用使用//abc.api.hydrogen.com/，而不是
• 我还尝试了一个拦截器，按照建议设置X-XSRF-TOKEN头，但是提取的令牌为null，因为它们没有在浏览器中设置

---

出现此问题的原因是浏览器/服务器只会将cookie附加到与请求来自的域相同的请求

要在dev环境中解决此问题，angular应用程序将在localhost上提供服务，而Laravel应用程序位于诸如abc.api.hydrogen.local I之类的域上，代理来自angular应用程序的请求：

首先确保您的请求是相对路由，例如，我将调用更改为/api/sanctum/crsf，然后将其代理到

然后在项目根目录中创建代理配置

proxy.conf.json

：

{
    "/api/*": {
      "target": "http://abc.api.hydrogen.local",
      "secure": false,
      "changeOrigin": true,
      "logLevel": "debug",
      "pathRewrite": {
        "^/api": ""
      }
    }
}

然后编辑

angular.json

以在代理提供服务时使用代理：

"architect": {
    ...
    "serve": {
        ...
        "options": {
            ....
            "proxyConfig": "proxy.conf.json"
        }
    }
}

最后，在

.env

文件中添加以下内容，以确保sanctum将请求识别为来自第一方SPA的请求，并且浏览器能够读取请求并将cookie附加到请求中

SANCTUM_STATEFUL_DOMAINS=localhost,.hydrogen.local
SESSION_DRIVER=cookie
SESSION_DOMAIN=localhost

---

现在一切都正常了。

我也面临着同样的问题。我认为问题在于浏览器中没有设置XSRF-TOKEN cookie，即使响应中有cookie。因此，登录请求失败，因为该请求未发送XSRF-TOKEN。一旦您的

sanctum/csrf cookie

请求完成，您能否检查应用程序中的cookie？我很高兴您解决了您的问题。我的问题几乎完全是你的，除了它内置的react。前端是localhost:9000，api是laravel.test/api/V1。仍然不工作。SESSION_DOMAIN=laravel.test并在有状态域中添加了localhost:9000您的会话域应为本地主机，否则浏览器将不会发送cookie。有状态域应该是您代理到的域，即Laravel.test更改

.env

对我的应用程序非常有效。谢谢