如何修复 /sanctum/csrf-cookie 错误

Posted 2023-03-25

【中文标题】如何修复 /sanctum/csrf-cookie 错误

【英文标题】：How to fix /sanctum/csrf-cookie errors

【发布时间】：2022-01-08 23:50:51

【问题描述】：

我正在使用 Laravel Sanctum Axios API 创建 react js 项目。当我得到注册页面时，它显示以下错误。

cors.php

<?php

返回 [

'paths' => ['api/*', 'sanctum/csrf-cookie','register', 'login' ],

'allowed_methods' => [ 
    'GET', 
    'POST', 
    'PUT', 
    'PATCH', 
    'DELETE', 
    'OPTIONS'],

'allowed_origins' => ['*'],

'allowed_origins_patterns' => [],

'allowed_headers' => [  
    'Origin',
    'Content-Type', 
    'Accept',
    'Authorization',
    'X-Requested-With',
    'X-CSRF-Token',
    
    ],

'exposed_headers' => [],

'max_age' => 0,

'supports_credentials' => true,

];

现在显示以下错误 CORS 策略已阻止从源“http://localhost:3000”访问“http://localhost:8000/sanctum/csrf-cookie”处的 XMLHttpRequest：请求标头字段 x-xsrf-token 不是Access-Control-Allow-Headers 在预检响应中允许。

config/Session.php

<?php

use Illuminate\Support\Str;

return [

    'driver' => env('SESSION_DRIVER', 'file'),

  

    'lifetime' => env('SESSION_LIFETIME', 120),

    'expire_on_close' => false,  
    'encrypt' => false,

    'files' => storage_path('framework/sessions'),

  
    'connection' => env('SESSION_CONNECTION', null),

    
    'table' => 'sessions',

 
    'store' => env('SESSION_STORE', null),

   
    'lottery' => [2, 100],

    'cookie' => env(
        'SESSION_COOKIE',
        Str::slug(env('APP_NAME', 'laravel'), '_').'_session'
    ),

 

    'path' => '/',

    'domain' => env('SESSION_DOMAIN', null),

    'secure' => env('SESSION_SECURE_COOKIE'),

    'http_only' => true,

    'same_site' => 'lax',

];

.env 文件

APP_NAME="Crafty Shop"
APP_ENV=local
APP_KEY=base64:ECzTCbd8nfS6I82jRsd4sj4Bo6yJa0GRTfyTOrOoCno=
APP_DEBUG=true
APP_URL=http://localhost

LOG_CHANNEL=stack
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3310
DB_DATABASE=crafty
DB_USERNAME=root
DB_PASSWORD=

BROADCAST_DRIVER=log
CACHE_DRIVER=file
FILESYSTEM_DRIVER=local
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

MEMCACHED_HOST=127.0.0.1

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_MAILER=smtp
MAIL_HOST=mailhog
MAIL_PORT=1025
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS=null
MAIL_FROM_NAME="$APP_NAME"

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=
AWS_USE_PATH_STYLE_ENDPOINT=false

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=mt1

MIX_PUSHER_APP_KEY="$PUSHER_APP_KEY"
MIX_PUSHER_APP_CLUSTER="$PUSHER_APP_CLUSTER"

app.js

axios.defaults.baseURL= "http://localhost:8000/";
axios.defaults.headers.post['Content-Type'] ='application/json';
axios.defaults.headers.post['Accept'] ='application/json';
axios.defaults.withCredentials = true;
axios.interceptors.request.use(function (config) 
    const token = localStorage.getItem('auth_token');
    config.headers.Authorization = token ? 'Bearer $':'';
    return config;
);

登录.js

axios.get('/sanctum/csrf-cookie').then(response => 
    axios.post('api/login',data).then(res =>
        if(res.data.status === 200)
            localStorage.setItem('auth_token', res.data.token);
            localStorage.setItem('auth_name', res.data.username);
            swal("Success", res.data.message,"success");
            console.log(res.data.username);
            history.push('/');
      
        
        else if(res.data.status === 401)
            swal("Warning", res.data.message,"warning");
        
        else
            setLogin(...loginInput,error_list:res.data.validation_errors);
        
    );
);

圣所.php

<?php

return [

    'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
        '%s%s',
        'localhost,localhost:3000,127.0.0.1,127.0.0.1:8000,::1',
        env('APP_URL') ? ','.parse_url(env('APP_URL'), PHP_URL_HOST) : ''
    ))),
   


    'guard' => ['web'],

   
    'middleware' => [
        'verify_csrf_token' => App\Http\Middleware\VerifyCsrfToken::class,
        'encrypt_cookies' => App\Http\Middleware\EncryptCookies::class,
          'cors' => \App\Http\Middleware\CorsMiddleware::class,
    ],

];

【问题讨论】：

你能不能把错误改成图片

转到浏览器中的网络选项卡并查看预检请求以查看它返回的内容。然后转到日志文件并检查请求抛出的错误。

请您添加config/cors.php文件中的代码。

好的。谢谢。我编辑了我的帖子

【参考方案1】：

您需要授予对前端 localhost 的访问权限才能向后端 API 发送请求。

所以我建议您仔细按照 laravel 网站上的说明进行操作： https://laravel.com/docs/8.x/sanctum#spa-configuration

如果您对某些步骤有任何疑问，可以问我。

但我认为您的问题是您的前端 URL 无法发送请求，您必须允许它。但无论如何，首先你必须按照链接中的步骤进行操作

【讨论】：

向我们展示您的 .env 文件，展示您如何从 Axios 调用 sanctum，并向我们展示 config/session.php

能不能也加个config/sanctum.php

尝试在你的 .env 文件中添加SANCTUM_STATEFUL_DOMAINS = localhost,localhost:8080,127.0.0.1:8080,localhost:3000,127.0.0.1,127.0.0.1:8000,::1 SESSION_DOMAIN = localhost

如果它不起作用，请在您的 config/sanctum.php 中添加：'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf( '%s%s', 'localhost,localhost:3000,127.0.0.1,127.0.0.1:8000,::1', env('APP_URL') ? ','.parse_url(env('APP_URL'), PHP_URL_HOST) : '' ))),

我添加了 Sanctum.php 文件

【参考方案2】：

您 MUST 在您的服务器应用上启用 CORS。 了解 Laravel 是如何做到这一点的。

这个问题可能会对你有所帮助。 Laravel CORS