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”中找到中间件组