Laravel Breeze api 和 sainttum CSRF Token cookie 的问题

Question

我正在尝试学习 React，我已经做过 Laravel，所以我面临的问题是我正在尝试从我的前端 React 应用程序登录，问题（因为我已经调试了大部分）是在 Laravel 中。

第一步是使用 Composer 将微风安装到我的 Laravel 项目 10.x 中， 然后我用 php artisan Breeze:install api 制作了项目唯一的 api。

所以返回时我没有任何刀片文件，但只有 roder 中的控制器和其他文件，用于在我的 React 项目中设置正确的登录并使用 axios 注册操作。

现在的问题是，当我过去从我的开发版本和 Postman 中测试 axios 的 api 路由时，我总是得到

419 unknown status

，即使我使用原始 JSON 将自定义属性发送到主体。

.env 文件

APP_NAME=portfolio-custom
APP_ENV=local
APP_KEY='key'
APP_DEBUG=true
APP_URL=http://127.0.0.1:8000/
FRONTEND_URL=http://localhost:5173
SANCTUM_STATEFUL_DOMAINS=localhost:5173
SESSION_DOMAIN=localhost

cors.php 配置

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Cross-Origin Resource Sharing (CORS) Configuration
    |--------------------------------------------------------------------------
    |
    | Here you may configure your settings for cross-origin resource sharing
    | or "CORS". This determines what cross-origin operations may execute
    | in web browsers. You are free to adjust these settings as needed.
    |
    | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
    |
    */

    'paths' => ['*'],

    'allowed_methods' => ['*'],

    'allowed_origins' => [env('FRONTEND_URL')],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true,

];

不幸的是，我的 axios 调用正在尝试读取令牌，但我的 laravel 项目中没有 cookie 令牌，我试图了解为什么它无法正确显示 反应中的 axios 错误

config: Object { timeout: 0, xsrfCookieName: "XSRF-TOKEN", xsrfHeaderName: "X-XSRF-TOKEN", … }
​​
adapter: Array [ "xhr", "http" ]
​​
baseURL: "http://127.0.0.1:8000"
​​
data: '{"email":"[email protected]","password":"password12345"}'
​​
env: Object { FormData: (), Blob: () }
​​
headers: Object { Accept: "application/json, text/plain, */*", "Content-Type": "application/json" }
​​
maxBodyLength: -1
​​
maxContentLength: -1
​​
method: "post"
​​
timeout: 0
​​
transformRequest: Array [ transformRequest(data, headers)
 ]
​​
transformResponse: Array [ transformResponse(data)
 ]
​​
transitional: Object { silentJSONParsing: true, forcedJSONParsing: true, clarifyTimeoutError: false }
​​
url: "/login"
​​
validateStatus: function validateStatus(status)
​​
withCredentials: true
​​
xsrfCookieName: "XSRF-TOKEN"
​​
xsrfHeaderName: "X-XSRF-TOKEN"
​​
<prototype>: Object { … }
​
message: "Request failed with status code 419"
​
name: "AxiosError"
​
request: XMLHttpRequest { readyState: 4, timeout: 0, withCredentials: true, … }
​
response: Object { data: {…}, status: 419, statusText: "unknown status", … }

我尝试了一些指南，但遇到了几个解决方案，问题是我不再有 balde 字段来使元标记解决方案使 src toke 工作，所以我需要理解为什么令牌没有出现在 cookie 中。

然而 te sse 将会是 wt ts warg 从 laravel 获取

23:15:37.850 Cookie “XSRF-TOKEN” was rejected for invalid domain.

23:15:37.850 Cookie “portfolio-custom” was rejected for invalid domain.

Answer 1

不知道您是否仍在寻找解决方案，但我今天遇到了同样的错误。问题是，微风将其身份验证路由放在 web.php 文件中。通常，web.php 路由适用于整体应用程序（使用刀片视图或 Livewire 之类的东西），而不是 API 应用程序。因此，Laravel 有专门连接到 web.php 路由的中间件来查找 crsf 令牌。如果将这些身份验证路由移至 api.php 路由文件，419 错误将不再发生。另一件事是向 Laravel 发出预请求以接收 crsf 令牌，并将其包含在后续请求中。根据我有限的知识（如果我错了，有人可以纠正我）构建一个使用 sainttum 类型 API 令牌或 jwt 类型令牌的 Laravel API，你有点不需要 crsf 令牌，因为你没有使用 Laravel 作为完整的堆栈解决方案。希望这些信息有帮助。