[vc_row el_class=”blog-info”][vc_column][vc_single_image source=”featured_image” img_size=”full” style=”vc_box_rounded”][vc_empty_space height=”40px”][vc_row_inner][vc_column_inner width=”1/6″][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text el_class=”font-weight-bold”]
Corrigiendo un “error no autenticado” al usar Laravel Sanctum para SPA
Laravel Sanctum
[/vc_column_text][vc_empty_space height=”40px”][/vc_column_inner][vc_column_inner width=”1/6″][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/6″][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text]
Puede estar trabajando localmente con el proyecto Laravel; Scaffold una aplicación de front-end con React/Vue/Angular y al realizar solicitudes a rutas envueltas dentro del middleware auth: sanctum, es posible que obtenga un error no autenticado. Es por errores de configuración. Arreglemos esto.
- Asegúrese de que la aplicación laravel esté sirviendo desde localhost (127.0.0.1) haciendo el buen servidor
php artisan serve. No utilice hosts virtuales porque no puede servir las aplicaciones de front-end desde el mismo host virtual.
- Verifique los números de puerto de su aplicación front-end. Por lo general, la aplicación React sirve en
http://localhost:3000y la aplicación Vue sirve desdehttp://localhost:8080.
- Es necesario que la (s) aplicación (es) front-end y la aplicación laravel sirvan desde el mismo dominio, localhost en nuestro caso.
- Establezca dominios con estado de Laravel Sanctum en el archivo .env. Estas son las direcciones de nuestras aplicaciones frontales, incluidos los números de puerto.
SANCTUM_STATEFUL_DOMAINS=localhost:8080,127.0.0.1:8080,localhost:3000,127.0.0.1:3000
- Configure el dominio de sesión en el archivo .env. Necesita cambiar esto en producción a su nombre de dominio.
SESSION_DOMAIN=localhost
- Establecer rutas y supports_credentails en cors.php Las rutas de web.php a las que desea tener acceso en su aplicación front-end deben agregarse a la matriz de rutas.
'paths' => ['api/*', 'login', 'register', 'otp/*', 'sanctum/csrf-cookie'],'supports_credentials' => true,
- Y finalmente, debe realizar solicitudes desde la aplicación de front-end a localhost/api/other-route pero no a 127.0.0.1/api/other-route usando axios.
[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/6″][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row el_class=”social-info”][vc_column width=”1/6″][/vc_column][vc_column width=”2/3″][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text][social_share_button themes=’theme1′][/vc_column_text][/vc_column_inner][vc_column_inner el_class=”youtube-inner-col” width=”1/2″][vc_column_text][likebtn theme=”youtube” lang=”auto” show_like_label=”0″ white_label=”1″ alignment=”right”][/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner el_class=”social-info-inner”][vc_column_inner width=”1/4″][vc_single_image image=”921″][/vc_column_inner][vc_column_inner width=”3/4″][vc_column_text]
Diego Pacheco
Ingeniero en Sitemas, MBA (Babson College). Desarrollador PHP/Java/JavaScript. Fundador & CEO de EpicStudio. Entusiasta de las tecnologías web (JavaScript, Vue, Laravel, AWS, Docker) Viajes, Negocios, Surf y Growth.[/vc_column_text][asvc_list_item icon_fontawesome=”fa fa-calendar-o” icon_size=”14px”]Programar una reunión[/asvc_list_item][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width=”1/6″][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]
Recent Post
[/vc_column_text][lvca_posts_carousel posts_query=”size:3|order_by:rand|post_type:post” image_linkable=”true” image_size=”full” taxonomy_chosen=”post_tag” display_title=”true” display_post_date=”true” display_summary=”true” autoplay_speed=”3000″ animation_speed=”300″ display_columns=”3″ scroll_columns=”3″ gutter=”3″ tablet_display_columns=”2″ tablet_scroll_columns=”2″ tablet_gutter=”3″ tablet_width=”800″ mobile_display_columns=”1″ mobile_scroll_columns=”1″ mobile_gutter=”3″ mobile_width=”480″][vc_empty_space height=”20px”][/vc_column][/vc_row]
