1

Estoy tratando de autenticar un SPA con un API construida en laravel 10

El dominio de mi SPA es localhost:9000

en config/cors.php agrego la direccion localhost:9000 en Allowed-Origins para permitir que se atiendan requests de ese dominio.

<?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' => ['http://localhost:9000'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true,

];

Luego en config/sanctum.php vuelvo a agregar la direccion del SPA para autenticar con tokens CSRF a las solicitudes provenientes de esa direccion

return [

    /*
    |--------------------------------------------------------------------------
    | Stateful Domains
    |--------------------------------------------------------------------------
    |
    | Requests from the following domains / hosts will receive stateful API
    | authentication cookies. Typically, these should include your local
    | and production domains which access your API via a frontend SPA.
    |
    */

    'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
        '%s%s',
        'localhost,localhost:9000,127.0.0.1,127.0.0.1:8000,::1',
        Sanctum::currentApplicationUrlWithPort()
    ))),

Estoy usando Quasar framework, consecuentemente uso axios para hacer peticiones http en la configuracion de la instancia asigno a la propiedad withCredentials el valor true para que todas las peticiones incluyan el token XSRF generado por laravel.

import { boot } from 'quasar/wrappers'
import axios from 'axios'

// Be careful when using SSR for cross-request state pollution
// due to creating a Singleton instance here;
// If any client changes this (global) instance, it might be a
// good idea to move this instance creation inside of the
// "export default () => {}" function below (which runs individually
// for each client)
const api = axios.create({ baseURL: 'http://sharedmarket.test' })

export default boot(({ app }) => {
  // for use inside Vue files (Options API) through this.$axios and this.$api

  app.config.globalProperties.$axios = axios
  // ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
  //       so you won't necessarily have to import axios in each vue file

  app.config.globalProperties.$api = api
  // ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
  //       so you can easily perform requests against your app's API
  axios.defaults.withCredentials = true
})

export { api }

Para obtener el token CSRF hago una peticion al endpoint /sanctum/csrf-cookie recibo como respuesta el token en el encabezado Set-Cookie esta cookie deberia almacenarse automaticamente en el navegador, pero no aparece por ninguna parte, revise en devtools Application/Storage/Cookies y al parecer no se esta guardando.

introducir la descripción de la imagen aquí

Luego de obtener este token, hago una peticion a la ruta /signup para registrar e iniciar la sesion del usuario, y aqui obtengo una respuesta de error, status 419, CSRF token mismatch, no adjunto el codigo del controlador de esa ruta porque la peticion ni siquiera llega a ejecutar el metodo controlador de esa ruta, el error se genera antes, en el middleware que verifica las sesiones.

introducir la descripción de la imagen aquí

Como alternativa a este problema, intente migrar el proyecto del SPA a la raiz del proyecto laravel para que ambas aplicaciones estuvieran en el mismo dominio, pero no pude porque estoy usando laravel Homestead con vagrant, tenia en mente hacer un symlink de la carpeta dist de mi proyecto Quasar dentro de la carpeta public del proyecto laravel, cada vez que intente crear el link simbólico un mensaje de error era lanzado el cual es "Protocol Error" intente ejecutar el comando como super usuario y obtuve el mismo resultado.

En que parte me estoy equivocando?

En Http/Kernel.php ya he descomentado la clase EnsureAllRequestsAreStateful, fue de lo primero que me asegure al empezar a configurar la autenticacion para este proyecto.

protected $middlewareGroups = [
    'web' => [
        \App\Http\Middleware\EncryptCookies::class,
        \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
        \Illuminate\Session\Middleware\StartSession::class,
        \Illuminate\View\Middleware\ShareErrorsFromSession::class,
        \App\Http\Middleware\VerifyCsrfToken::class,
        \Illuminate\Routing\Middleware\SubstituteBindings::class,
    ],

    'api' => [
        \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
        \Illuminate\Routing\Middleware\ThrottleRequests::class.':api',
        \Illuminate\Routing\Middleware\SubstituteBindings::class,
    ],
];

1 respuesta 1

1

Si estas usando laravel Homestead tu IP de homestead siempre va a ser diferente a la IP de tu maquina física.

La cookie de sesion jamas se estaba guardando en el navegador porque el dominio de la SPA y el de la API jamas iban a coincidir.

Mi SPA la estoy trabajando en mi maquina fisica, no estoy haciendola dentro de mi maquina virtual.

el dominio de mi maquina homestead era sharedmarket.test, pero tambien localhost:8000, si hacia una peticion a sharedmarket.test jamas iba a ser almacenada la cookie debido a que el dominio sharedmarket es diferente al dominio de la SPA, que en este caso es la SPA construida con quasar CLI.

luego si hago la peticion a localhost:8000 siendo mi SPA de la direccion localhost:9000, por alguna razon el encabezado Access-Control-Allow-Origin nunca se incluye y tengo un error de CORS, de echo pareciera que localhost:8000 no es mi servidor de laravel porque si pongo cualquier direccion en el navegador. no obtengo nada, ni siquiera de las rutas que no estan siendo protegidas con autenticacion.

introducir la descripción de la imagen aquí

Entonces hacer peticiones de tu maquina fisica a tu maquina virtual usando la direccion localhost:8000 no va a darte el resultado que quieres.

localhost es un alias que hace referencia a la maquina en la que estas, si haces una solicitud a localhost:8000, en este caso estaba diciendo 'has una peticion aqui mismo en puerto 8000', la solicitud jamas llega a la maquina virtual.

Podia usar el dominio sharedmarket.test para hacer los requests? En este caso si, pero iba a tener problemas ya que al ser esa ip y la ip de mi maquina local diferentes (192.168.56.56 una alias para sharedmarket.test mientras que mi spa esta en localhost:9000), las cookies de sesion jamas se iban a guardar ya que estan usando la politica Same-Site=Lax, el navegador jamas iba a guardar una cookie de un dominio totalmente ajeno a menos que estableciera Same-Site=None en las cookies de sesion del servidor, no creo que sea buena idea usar el valor None para tus cookies de sesion ya que facilmente podrian ser robadas.

Mi SPA construida en quasar tambien estaba siendo servida en la direccion 192.168.56.1:9000, tambien podias acceder a ella con localhost:9000. lo que hice fue darle un nombre de dominio a 192.168.56.1 en el archivo hosts de windows.

C:\Windows\System32\drivers\etc\hosts

Al final del archivo agregue lo siguiente

192.168.56.1 data.sharedmarket.test

Ahora esta direccion es considerada un subdominio de sharedmarket.test y puedo acceder a ella con el puerto 9000, data.sharedmarket.test:9000

Luego me voy a config/cors.php y modifico la propiedad allowed_origins para que tenga mi subdominio.

'allowed_origins' => ['http://localhost:9000','http://data.sharedmarket.test:9000'],

luego me voy a .env y agrego lo siguiente en SESSION_DOMAINS

SESSION_DOMAIN=.sharedmarket.test

Ahora debes ir a config/sanctum.php y agregar el subdominio con el puerto a la lista de stateful domains.

'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
    '%s%s',
   'localhost,data.sharedmarket.test:9000,localhost:9000,192.168.56.1:9000,127.0.0.1,127.0.0.1:8000,::1',
    Sanctum::currentApplicationUrlWithPort()
))),

Ahora cualquier subdominio de sharedmarket.test puede obtener cookies de sesion

Recuerda modificar tu archivo quasar.config.js en tu SPA para que el server de desarrollo de quasar sirva tu aplicación frontend en el subdominio, debes modificar el campo host de la propiedad devServer, si no esta presente, puedes agregarla.

devServer: {
  // https: true
  host: 'data.sharedmarket.test',
  open: true // opens browser window automatically
}

Esta es la unica forma en la que vas a poder comunicar tu SPA de quasar con un API laravel instalado en la maquina virtual Homestead, debes dar un subdominio a la ip en donde se esta sirviendo la SPA y además el subdominio debe coincidir con el dominio del servidor de laravel.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.