如何使用 Laravel Sanctum 和 React 修复 401 Unauthorized 错误？

如何解决如何使用 Laravel Sanctum 和 React 修复 401 Unauthorized 错误？

我有以下设置：

• Laravel 与 Homestead 一起运行
• 域 laravel-api.test 指向我的 Homestead 环境
• 使用自定义 HOST app.laravel-api.test:3000 在本地运行的 React (npx create-react-app)

---

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,

在我的 .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);
        });
    });
  };

• 现在我对 sanctum/csrf-cookie 的请求进展顺利，我将收到 Cookie。
• 对 login 的请求也进展顺利，它将返回用户。

---

问题

但现在的问题是我制作了一个按钮来请求图书列表 (/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;

解决方法

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

在你的 .env 中你应该有这个：

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

也在您的后端：/config/cors.php 中，将 support_credentials 更改为 true ：

'supports_credentials' => true,

,

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