How to fix /sanctum/csrf-cookie errors-CodePudding

I am creating react js project with the Laravel Sanctum Axios API. When I get the sign-up page it shows the below error.

cors.php

<?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' => true,

];

Errors

Access to XMLHttpRequest at 'http://localhost:8000/sanctum/csrf-cookie' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

xhr.js:210

GET http://localhost:8000/sanctum/csrf-cookie net::ERR_FAILED

createError.js:16
Uncaught (in promise) Error: Network Error at createError (createError.js:16) at XMLHttpRequest.handleError (xhr.js:117)

CodePudding user response：

You MUST enable CORS on your server app. Find out how Laravel does this.

This question may help you. Laravel CORS

CodePudding user response：

You need to give access to your front localhost to send requests to the back-end API.

So I recommend you carefully follow the instructions from the laravel website: https://laravel.com/docs/8.x/sanctum#spa-configuration

and if you would have any questions about some steps you can ask me.

But I think your problem is that your front URL cannot send requests and you have to allow it. but anyway first you have to follow the steps from the link