Laravel 8, Sanctum and Angular 8

Question

I have the subject environment in linux. I have made the configuration of cors.conf, session.conf, kernel:api with EnsureFrontendRequestsAreStateful, .env. All that is raccomanated in all documentation that i read. Laravel in localhost:8000 Angular in localhost:4200

In particular:

Kernel.php:

'api' => [
      \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
      'throttle:api',
...

cors.php

'paths' => [
    'api/*',
    'login',
    'logout',
    'sanctum/csrf-cookie'
],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => true,

sanctum.php

'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', 'localhost:4200,localhost,localhost:8000,127.0.0.1,127.0.0.1:4200,127.0.0.1:8000')),

in .env

SESSION_DOMAIN=.localhost

In Angular when i get csrf-cookie respons is:

Bloccata richiesta multiorigine (cross-origin): il criterio di corrispondenza dell’origine non consente la lettura della risorsa remota da http://localhost:8000/sanctum/csrf-cookie. Motivo: richiesta CORS non riuscita.

this is my stack:

where am i wrong? Thank's before.

csrf-collie request is loading okay with proper Allow Origin, what's returned for login? if you aren't able to check details of it's request then query it in postman and share the response — Metabolic, Nov 06 '20 at 09:12
Yes, i know, but simply the returned cookie don't was saved in storage so in login reques miss X-CSRF-COOKIE — IT_StefanoSca, Nov 06 '20 at 20:09
you are using withCredentials so technically the cookie should be sent, as for using cookie in API, I will suggest move to JWT and use the `api` routes of Laravel. Sending request to `web` routes is for web pages. — Metabolic, Nov 07 '20 at 08:51

score -1 · Answer 1 · answered Nov 05 '20 at 14:08

-1

You request is being blocked due to violation of Cross Origin Resource Sharing or CORS for short.

This issue arises when you make a request from domain A to domain B. In this case, as you are using localhost, I suppose you are making requests from ng server @ localhost:4200 to localhost:8000, viz Laravel Server.

To solve it, you need to add CORS headers in responses from your Laravel server i.e localhost:8000. In simple cases, you can add this header in your response Access-Control-Allow-Origin: *

The * means that the server is willing to respond to request from any domain. This is a serious security concern in Production so you should always specify your exact domains which should be allowed for CORS e.g:

Access-Control-Allow-Origin: http://localhost:4200

There are multiple ways to do it. For developmental purposes, you can use a CORS plugin such as CORS everywhere for FireFox.

For development server, you can also add CORS headers either in web server or via Laravel. An easy way to use laravel-cors package from here

You can also do further readings on CORS on Mozilla Site

answered Nov 05 '20 at 14:08

Metabolic

2,808
3
27
41

1

Thanks, but is no sufficient set laravel cors config file? in many tutorial this work. I've configured firefox plugin Moesif CORS, but not work. – IT_StefanoSca Nov 05 '20 at 14:49
Laravel CORS config is sufficient but then you need to validate as well whether your headers are correct and properly sent to server. Can you share request and response headers? – Metabolic Nov 05 '20 at 14:51
this i request: GET /sanctum/csrf-cookie undefined Host: localhost:8000 User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:78.0) Gecko/20100101 Firefox/78.0 Accept: application/json, text/plain, */* Accept-Language: it-IT,it;q=0.8,en-US;q=0.5,en;q=0.3 Accept-Encoding: gzip, deflate Origin: http://localhost:4200 Connection: keep-alive Referer: http://localhost:4200/corporate/session/login The response in blocked. – IT_StefanoSca Nov 05 '20 at 15:00
This in Chrome: `Request URL: http://localhost:8000/sanctum/csrf-cookie Request Method: GET Status Code: 204 No Content Remote Address: 127.0.0.1:8000 Referrer Policy: no-referrer-when-downgrade Access-Control-Allow-Credentials: true Access-Control-Allow-Origin: http://localhoat:4200 Cache-Control: no-cache, private Connection: close Date: Thu, 05 Nov 2020 15:02:21 GMT Date: Thu, 05 Nov 2020 15:02:21 GMT Host: localhost:8000 phpdebugbar-id: Xf3c98679b8e84bb0000e3754630791c8 Set-Cookie: XSRF-TOKEN=eyJpdiI6InNFSGxrZjhZUklCaTJ2dStvVFo5d2c9PSIsInZhbHVlIjoibHBCbTk4S... – IT_StefanoSca Nov 05 '20 at 15:05
`Set-Cookie: laravel_session=eyJpdiI6I.....zov-2020 17:02:21 GMT; Max-Age=7200; path=/; domain=.localhost; httponly; samesite=lax X-Powered-By: PHP/7.4.12 Accept: application/json, text/plain, */* Accept-Encoding: gzip, deflate, br Accept-Language: it-IT,it;q=0.9,en-US;q=0.8,en;q=0.7 Connection: keep-alive Host: localhost:8000 Origin: http://localhost:4200 Referer: http://localhost:4200/corporate/session/login Sec-Fetch-Mode: cors Sec-Fetch-Site: same-site User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36` – IT_StefanoSca Nov 05 '20 at 15:05
i alredy use laravel-cors – IT_StefanoSca Nov 05 '20 at 16:31
You need to specify protocol here ` Access-Control-Allow-Origin: localhoat:4200` so it becomes ` Access-Control-Allow-Origin: http://localhoat:4200` also there is error in spelling, you are using localhoat not localhost – Metabolic Nov 05 '20 at 16:56
Yes, this error spelling was corrected before. Thanks – IT_StefanoSca Nov 06 '20 at 20:28

Laravel 8, Sanctum and Angular 8

1 Answers1