Axios POST 到 Laravel API 導致 419 錯誤，但在郵遞員中工作正常

Question

我有一個新的 laravel 項目，我使用 Laravel sanctum api 令牌來驗證 api 發送郵遞員的帖子請求工作正常但是如果我使用 Axios 從我的 next.js 項目發送它給我一個 419 錯誤

laravel 項目：本地主機：8000

next.js 項目：localhost:3000

我認為這是一個問題，但我真的不知道

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,
  ];

更新

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,
    });
}

}

我嘗試更新： 為什么 Laravel API 在 POST 和 PUT 方法上返回 419 狀態代碼？

我已經將路由添加到 VerifyCsrfToken 中間件

<?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'
        //
    ];
}

同樣的問題我試過評論中間件同樣的問題

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

這些是我的路線

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 我加了這個

  'domain' => 'localhost',

注意：我沒有使用 sanctum csrf-cookie 我使用的是 sanctum api 令牌，我試圖訪問的路由甚至沒有受到保護

Update get, put工作正常，只有post請求才有問題

Answer 1

如果沒有您的 next.js 身份驗證設置，很難看到，但從您所展示的內容來看，嘗試將“supports_credentials”更改為 true。

更新：

我之前沒用過 Next.js 但我用過 Nuxt。

您可能還需要將 'SESSION_DOMAIN=localhost' 添加到 your.env 文件。 您需要后端和前端在同一個域上進行通信。 即使它們在不同的端口上。

Answer 2

我最近遇到了這個問題。 不幸的是，經過一夜的搜索，我沒有在這里找到合適的答案，所以我想把對我有用的東西放在這里。

問題在於 Sanctum 正在嘗試像 SPA 一樣驗證您的前端應用程序。

要使 SPA 身份驗證起作用，API 和前端必須共享相同的頂級域，而您和我的應用程序都不是這種情況。

我所做的是阻止 Laravel 像 SPA 一樣嘗試驗證我的前端。 我通過從中間件組的“api”中刪除此類“\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class”來做到這一點。

您可以在“\app\Http\Kernel.php”中找到中間件組