Axios POST 到 Laravel API 导致 419 错误，但在邮递员中工作正常

Question

I have a new laravel project and im using Laravel sanctum api tokens to authenticate the api sending a post request with postman works fine but if i send it from my next.js project using Axios it give me a 419 error

laravel project: localhost:8000

next.js project: localhost:3000

i think its a cors proplem but i dont realy know

laravel cors.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' => ['api/*', 'sanctum/csrf-cookie'],

'allowed_methods' => ['*'],

'allowed_origins' => ['*'],

'allowed_origins_patterns' => [],

'allowed_headers' => ['*'],

'exposed_headers' => [],

'max_age' => 0,

'supports_credentials' => false,
  ];

Update

api.js

import Axios from "axios";

  let urls = {
  development: "http://localhost:8000/api/",
  production: "",
  };
  const api = Axios.create({
  baseURL: urls[process.env.NODE_ENV],
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json",
  },
  });

  export default api;

auth.js

import React, { createContext, useState, useContext, useEffect } from 

"react";
import Cookies from "js-cookie";
import Router, { useRouter } from "next/router";
//api here is an axios instance
import api from "../services/Api";

const AuthContext = createContext({});

export const AuthProvider = ({ children }) => {


 const login = async (username, password) => {
    const { data: data } = await api.post("login", {
      username,
      password,
    });
}

}

Update i tried: Why does the Laravel API return a 419 status code on POST and PUT methods?

i have added the routes to the VerifyCsrfToken Middleware

<?php

namespace App\Http\Middleware;

use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken as Middleware;

class VerifyCsrfToken extends Middleware
{
    /**
     * The URIs that should be excluded from CSRF verification.
     *
     * @var array
     */
    protected $except = [
        'http://localhost:8000/api/login'
        //
    ];
}

same proplem i have tried commenting the Middleware same proplem

// \App\Http\Middleware\VerifyCsrfToken::class,

these are my routes

api.php

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


Route::group(['middleware' => ['auth:sanctum']], function () {

//test GRUD

   
Route::get('/posts',[PostController::class,'index']);


// logout 

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


});

session.php i added this

  'domain' => 'localhost',

Note: im not using sanctum csrf-cookie im using sanctum api tokens and the routes im trying to access is not even protected

Update get, put works fine the problem only with post request

Answer 1

It's tough to see without your next.js auth set up but from what you have shown try changing 'supports_credentials' to true.

Updated:

I haven't used Next.js before but I have used Nuxt.

You may also need to add 'SESSION_DOMAIN=localhost' to your.env file. You need your backend and front end to communicate on the same domain. Even if the they're on different ports.

Answer 2

I ran into this problem recently. Unfortunately, I did not find the appropriate answer here after a night of searching, so I thought to drop what worked for me here.

The problem is that Sanctum is trying to authenticate your frontend app like an SPA.

For SPA authentication to work, the API and frontend must share the same top-level domain, which is not the case in your application and mine too.

What I did was to stop Laravel from trying to authenticate my frontend like an SPA. I did that by removing this class "\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class" from 'api' in my middleware group.

You can locate the middleware group in "\app\Http\Kernel.php"