title: How to fix /sanctum/csrf-cookie errors
body: <p>I am creating react js project with the <code>Laravel</code> Sanctum Axios API. When I get the sign-up page it shows the below error.</p>
  <p>cors.php</p>
  <pre><code>&lt;?php
  </code></pre>
  <p>return [</p>
  <pre><code>'paths' =&gt; ['api/*', 'sanctum/csrf-cookie','register', 'login' ],
  
  'allowed_methods' =&gt; [ 
      'GET', 
      'POST', 
      'PUT', 
      'PATCH', 
      'DELETE', 
      'OPTIONS'],
  
  'allowed_origins' =&gt; ['*'],
  
  'allowed_origins_patterns' =&gt; [],
  
  'allowed_headers' =&gt; [  
      'Origin',
      'Content-Type', 
      'Accept',
      'Authorization',
      'X-Requested-With',
      'X-CSRF-Token',
      
      ],
  
  'exposed_headers' =&gt; [],
  
  'max_age' =&gt; 0,
  
  'supports_credentials' =&gt; true,
  </code></pre>
  <p>];</p>
  <p>Now below error shown
  <strong>Access to XMLHttpRequest at 'http://localhost:8000/sanctum/csrf-cookie' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field x-xsrf-token is not allowed by Access-Control-Allow-Headers in preflight response.</strong></p>
  <p>config/Session.php</p>
  <pre><code>&lt;?php
  
  use Illuminate\Support\Str;
  
  return [
  
      'driver' =&gt; env('SESSION_DRIVER', 'file'),
  
    
  
      'lifetime' =&gt; env('SESSION_LIFETIME', 120),
  
      'expire_on_close' =&gt; false,  
      'encrypt' =&gt; false,
  
      'files' =&gt; storage_path('framework/sessions'),
  
    
      'connection' =&gt; env('SESSION_CONNECTION', null),
  
      
      'table' =&gt; 'sessions',
  
   
      'store' =&gt; env('SESSION_STORE', null),
  
     
      'lottery' =&gt; [2, 100],
  
      'cookie' =&gt; env(
          'SESSION_COOKIE',
          Str::slug(env('APP_NAME', 'laravel'), '_').'_session'
      ),
  
   
  
      'path' =&gt; '/',
  
      'domain' =&gt; env('SESSION_DOMAIN', null),
  
      'secure' =&gt; env('SESSION_SECURE_COOKIE'),
  
      'http_only' =&gt; true,
  
      'same_site' =&gt; 'lax',
  
  ];
  </code></pre>
  <p>.env file</p>
  <pre><code>APP_NAME=&quot;Crafty Shop&quot;
  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=&quot;${APP_NAME}&quot;
  
  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=&quot;${PUSHER_APP_KEY}&quot;
  MIX_PUSHER_APP_CLUSTER=&quot;${PUSHER_APP_CLUSTER}&quot;
  </code></pre>
  <p>app.js</p>
  <pre><code>axios.defaults.baseURL= &quot;http://localhost:8000/&quot;;
  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;
  });
  </code></pre>
  <p>Login.js</p>
  <pre><code>axios.get('/sanctum/csrf-cookie').then(response =&gt; {
      axios.post('api/login',data).then(res =&gt;{
          if(res.data.status === 200){
              localStorage.setItem('auth_token', res.data.token);
              localStorage.setItem('auth_name', res.data.username);
              swal(&quot;Success&quot;, res.data.message,&quot;success&quot;);
              console.log(res.data.username);
              history.push('/');
        
          }
          else if(res.data.status === 401){
              swal(&quot;Warning&quot;, res.data.message,&quot;warning&quot;);
          }
          else{
              setLogin({...loginInput,error_list:res.data.validation_errors});
          }
      });
  });
  </code></pre>
  <p>Sanctum.php</p>
  <pre><code>&lt;?php
  
  return [
  
      'stateful' =&gt; 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' =&gt; ['web'],
  
     
      'middleware' =&gt; [
          'verify_csrf_token' =&gt; App\Http\Middleware\VerifyCsrfToken::class,
          'encrypt_cookies' =&gt; App\Http\Middleware\EncryptCookies::class,
            'cors' =&gt; \App\Http\Middleware\CorsMiddleware::class,
      ],
  
  ];
  </code></pre>