Reactjs 如何修复Laravel Sanctum的401未经授权错误并作出反应？

我有以下设置：

• 拉拉维尔与家园赛跑
• 域

  laravelapi.test

  指向我的家园环境
• React（npx创建React应用程序）使用自定义主机

  app.laravel api在本地运行。测试：3000

---

Laravel

在我的路由

（routes/api.php）

中，我添加了两条路由：

Route::post('login', [App\Http\Controllers\LoginController::class, 'login']);
Route::middleware('auth:sanctum')->get('books', [App\Http\Controllers\BookController::class, 'list']);

在我的

config/cors.php

中，我添加了：

'paths' => ['api/*', 'sanctum/csrf-cookie'],

'allowed_methods' => ['*'],

'allowed_origins' => ['*'],

'allowed_origins_patterns' => [],

'allowed_headers' => ['*'],

'exposed_headers' => [],

'max_age' => 0,

'supports_credentials' => true,

在my

.env

中，我添加了以下内容：

SESSION_DOMAIN=.laravel-api.test
SANCTUM_STATEFUL_DOMAINS=app.laravel-api.test:3000

---

反应

在React中，我创建了一个函数，可以轻松发送Axios请求：

import axios from "axios";

const apiClient = axios.create({
  baseURL: "http://laravel-api.test",
  withCredentials: true,
});

export default apiClient;

然后我为我的登录表单创建了一个提交函数：

const handleSubmit: FormEventHandler = (e) => {
    e.preventDefault();

    apiClient.get("sanctum/csrf-cookie").then((response) => {
      apiClient
        .post("api/login", {
          email: email,
          password: password,
        })
        .then((response) => {
          console.log(response);
        })
        .catch((error) => {
          console.error(error);
        });
    });
  };

• 现在我对圣殿/csrf cookie的请求进展顺利，我将收到cookie

• 登录

  的请求也很好，它将返回用户

---

问题

但现在的问题是，我制作了一个按钮来请求书籍列表（

/api/books

）。请求正在发送，但我收到了一个

401 Unauthorized

错误，带有

{“message”：“Unauthenticated.”}

响应

我读过很多论坛，但我找不到我的情况，也没有答案。我能试试什么？我如何调试圣殿，并找出我未经认证的原因

是饼干吗？是主机名吗

import React from "react";
import apiClient from "../services/api";

interface Book {
  id: string;
  title: string;
}

const Books = () => {
  const [books, setBooks] = React.useState<Book[]>([]);
  
  React.useEffect(() => {
    apiClient
      .get("/api/books")
      .then((response) => {
        setBooks(response.data);
      })
      .catch((error) => console.error(error));
  }, []);

  const bookList = books.map((book) => <li key={book.id}>{book.title}</li>);

  return <ul>{bookList}</ul>;
};

export default Books;

从“React”导入React；
从“./services/api”导入apiClient；
接口书{
id：字符串；
标题：字符串；
}
康斯特图书=（）=>{
const[books，setBooks]=React.useState（[]）；
React.useffect（（）=>{
apiClient
.get（“/api/books”）
。然后（（响应）=>{
setBooks（response.data）；
})
.catch（（错误）=>console.error（错误））；
}, []);
const bookList=books.map（（book）=>
{book.title}
）；
返回
{bookList}
；
};
导出默认书籍；

我认为首先你需要设置不同的主机，你的react应用程序应该有主域laravel api.test而没有端口，你的后端应该是：api.laravel api.test

在.env中，您应该具有以下内容：

SESSION_DOMAIN=.laravel-api.test
SANCTUM_STATEFUL_DOMAINS=laravel-api.test

另外，在后端：/config/cors.php中，将support\u凭据更改为true：

'supports_credentials' => true,

---

最后，每次更改.env文件时，我都必须清除配置缓存。

这是我几个月来一直试图解决的一个问题。这个问题让我放弃了这个项目一段时间，因为我无法前进，因为这是一个毫无道理的错误。最近我又回到了这个项目，发现自己在寻找解决方案。我还不得不问一个关于我观察结果的问题。到目前为止还没有解决方案，但当我得到一个解决方案时，我会放弃，而且如果发现，也不要忘记放弃urs。