Запросы Laravel 11 Sanctum от React выдают 400 ошибок ⇐ Php

[Anonymous]

Следуя документации Laravel 11, я добавил Sanctum с помощью следующей команды:
php artisan install:api
Я обновил модель пользователя до следующее:

Код: Выделить всё

use Laravel\Sanctum\HasApiTokens;

class User extends Authenticatable
{
use HasApiTokens, HasFactory, Notifiable;
.....

cors.config

Код: Выделить всё

return [
'paths' => ['api/*', 'sanctum/csrf-cookie'],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => true,
];

sanctum.php
используйте Laravel\Sanctum\Sanctum;

Код: Выделить всё

return [

'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
'%s%s',
'localhost,localhost:3000,127.0.0.1,127.0.0.1:8000,::1',
Sanctum::currentApplicationUrlWithPort()
))),
'guard' => ['web'],
'expiration' => null,
'token_prefix' => env('SANCTUM_TOKEN_PREFIX', ''),
'middleware' => [
'authenticate_session' => Laravel\Sanctum\Http\Middleware\AuthenticateSession::class,
'encrypt_cookies' => Illuminate\Cookie\Middleware\EncryptCookies::class,
'validate_csrf_token' => Illuminate\Foundation\Http\Middleware\ValidateCsrfToken::class,
],
];

маршрут api.php выглядит так

Код: Выделить всё

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Api\CourseController;
use App\Http\Controllers\Api\AuthController;

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
return $request->user();
});

Route::get('courses', [CourseController::class, 'list']);//->middleware('auth:sanctum');

Route::post('login', [AuthController::class, 'login']);
Route::post('logout', [AuthController::class, 'logout']);
Route::post('register', [AuthController::class, 'register']);

Не буду вставлять всю логику AuthController, чтобы не раздувать вопрос, но логин выглядит следующим образом:

Код: Выделить всё

public function login(Request $request)
{
try {
$credentials = $request->only('email', 'password');

if(!Auth::attempt($credentials)) {

return response()->json([
'status' => false,
'message' => "Credentials don't match.",
], 401);
}

$user = User::where('email', $request->email)->first();

return response()->json([
'status' => true,
'message' => 'user logged in successfully',
'token' => $user->createToken("API TOKEN")->plainTextToken
], 200);

} catch(\Exception $e) {
return response()->json([
'status' => false,
'message' => $e->getMessage(),
]);
}
}

Когда я захожу в почтальон, я могу войти в систему.
Как моя страница входа в React выдает ошибку 419 при попытке войти в систему:< /p>
Ниже показано, что у меня есть в React:
App.js

Код: Выделить всё

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { AuthProvider } from './AuthContext';
import Login from './pages/login';
import Register from './pages/register';
import Courses from './pages/courses';
import Home from './pages/home';
import Navigation from './components/Navigation';

const App = () => {
return (











);
};

export default App;

src/AuthContext.js

Код: Выделить всё

import React, { createContext, useContext, useState, useEffect } from 'react';

import { fetchUser } from './authService';

const AuthContext = createContext();

export const AuthProvider = ({ children }) =>  {
const [user, setUser] = useState(null);

useEffect(() => {
const loadUser = async () => {
try {
const userData = await fetchUser();
setUser(userData);
} catch (error) {
setUser(null);
}
};

loadUser();
}, []);

return (

{children}

);
};

export const useAuth = () => {
return useContext(AuthContext);
};

src/authService

Код: Выделить всё

import axiosInstance from './axios';
import { getCsrfCookie } from './csrf';

export const login = async (email, password) => {
await getCsrfCookie();
const response = await axiosInstance.post('/api/login', { email, password });
return response.data;
};

export const register = async (formData) => {
const response = await axiosInstance(`/api/register`, formData);
return response.data;
};

export const logout = async () => {
const response = await axiosInstance.post('/api/logout');
return response.data;
};

export const fetchUser = async () => {
await getCsrfCookie();
const response = await axiosInstance.get('/api/user');
return response.data;
};

Настройка axios в src/axios.js выглядит следующим образом:

Код: Выделить всё

import axios from 'axios';

const axiosInstance = axios.create({
baseURL: 'http://127.0.0.1:8000',
withCredentials: true,
});

export default axiosInstance;

src/csrf.js

Код: Выделить всё

import axiosInstance from './axios';

export const getCsrfCookie = async () => {
await axiosInstance.get('/sanctum/csrf-cookie');
};

На этом этапе, если я обновлю страницу, я увижу в консоли следующую ошибку:

Код: Выделить всё

Failed to load resource: the server responded with a status of 401 (Unauthorized)

Это означает, что что-то не так с маршрутом /sanctum/csrf-cookie.
Страница входа (src/pages/login.js) выглядит следующим образом:

Код: Выделить всё

import React, { useState } from 'react';
import { useAuth } from '../AuthContext';
import { login } from '../authService';

const Login = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const { setUser } = useAuth();

const handleSubmit = async (e) => {
e.preventDefault();
try {
const user = await login(email, password);
setUser(user);
} catch (error) {
console.error('Login failed', error);
}
};

return (


Login


Email
 setEmail(e.target.value)}
required
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
/>

Password
  setPassword(e.target.value)}
required
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
/>


Login





);
};

export default Login;

Когда я захожу в почтальон, я могу войти в систему.
Как моя страница входа в React выдает ошибку 419 при попытке войти в систему.< /p>
Мой Laravel находится на http://127.0.0.1:8000/
Сайт React находится на http://localhost:3000, который теоретически был очищен святилищем конфигурация.
Как я могу разрешить моему приложению React аутентифицироваться и гарантировать, что я могу отправлять запросы к другим конечным точкам, защищенным промежуточным программным обеспечением Sanctum?
Я покопался довольно много, и найденные на данный момент ответы кажутся устаревшими

Подробнее здесь: https://stackoverflow.com/questions/786 ... 400-errors