时间戳

首页 > 解决方案 > Axios POST 到 Laravel API 导致 419 错误，但在邮递员中工作正常

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

问题描述

我有一个新的 laravel 项目，我使用 Laravel sanctum api 令牌来验证使用邮递员发送帖子请求的 api 工作正常，但是如果我使用 Axios 从我的 next.js 项目发送它，它会给我一个 419 错误

laravel 项目：本地主机：8000

next.js 项目：本地主机：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 令牌，我试图访问的路由甚至没有受到保护

更新 get, put仅在post请求时才能正常工作

标签： laravelaxiosnext.jscross-domain

解决方案

如果没有设置 next.js 身份验证，很难看到，但从您所展示的尝试将“supports_credentials”更改为 true。

更新：

我以前没用过 Next.js，但我用过 Nuxt。

您可能还需要将“SESSION_DOMAIN=localhost”添加到您的 .env 文件中。您需要后端和前端在同一个域上进行通信。即使它们在不同的端口上。

推荐阅读