React Fetch to Laravel API 创建新会话

Question

我的应用在前端使用 React，在后端使用 Laravel 5.4。我正在使用 fetch() 从后端请求数据。问题是页面加载时会创建两个会话。当发出 POST 请求时，CSRF 中间件会抛出 TokenMismatchException，因为发送的令牌与创建的第一个会话匹配，但它会检查第二个会话。

我正在 app.blade.php

中设置令牌

<meta name="_token" content="{{ csrf_token() }}">

并在获取配置中获取令牌

fetchConfig = {
    headers:  {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
    },
    credentials: 'same-origin'
}}

这是解密的会话：

a:3:{s:6:"_token";s:40:"7obvOzPaqqJDtVdij8RaqrvmTFLjKA2qnvYMxry6";s:9:"_previous";a:1:{s:3:"url";s:24:"http://localhost/page";}s:6:"_flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}}

a:3:{s:6:"_token";s:40:"5Aiws9Qy72YzlkfWX81zkhzrSeiMDYjFWiLeDAwN";s:9:"_previous";a:1:{s:3:"url";s:41:"http://localhost/api/page";}s:6:"_flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}}

请求URL：http://localhost/page

API URL: http://localhost/api/page

当 React 应用程序发出初始 GET 请求时，如何防止创建新会话？

Answer 1

我不确定您的要求是什么 URL 以及您的目标是什么 API url。确保两者在同一个域（包括子域）上。

我认为仅对 API 路由禁用 CSRF 验证是个好主意，因为这些可能会被其他域、本机应用等使用

您可以通过添加以下 class 文件来实现：app/Http/Middleware/VerifyCsrfToken.php

<?php

namespace App\Http\Middleware;

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

class VerifyCsrfToken extends BaseVerifier
{
    /**
     * The URIs that should be excluded from CSRF verification.
     *
     * @var array
     */
    protected $except = [
        'api/*',
    ];
}

确保编辑 Kernal.php 以指向新的 class:

protected $middleware = [
    'csrf' => 'App\Http\Middleware\VerifyCsrfToken'
];

要了解更多 Laravel 如何使用 CSRF，请检查 this laracast video

Answer 2

Laravel automatically generates a CSRF "token" for each active user session managed by the application. This token is used to verify that the authenticated user is the one actually making the requests to the application. : https://laravel.com/docs/5.4/csrf

APIs 是无国籍的。 API 中没有 session。所以你不应该在 API 中使用 CSRF 令牌。如果你勾选 Kernel.php of laravel. You will see Tylor didn't add VerifyCsrf middleware in API group. Which suggest that CSRF is only used in the request having session i.e, stateful request. I would recommend you to use JWT based authentication system for API. For more about JWT check here.

您可以将此 laravel 包用于 JWT：https://github.com/tymondesigns/jwt-auth

React Fetch to Laravel API 创建新会话

React Fetch to Laravel API Creates New Session

php

session

fetch

laravel

reactjs