Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I have my backend in Laravel, working in server. Let it be: https://my-server.com
I have my vuejs application working in localhost. I wanted to connect this application to the backend.
I started to change my .env
VUE_APP_DOMAIN = "localhost:8001"
VUE_APP_DESTINATION = "https://my-server.com/"
VUE_APP_API_URL = "https://my-server.com/"
VUE_APP_EMAIL = "[email protected]"
VUE_APP_SECRET_VERSION="1.0"
The first step was that I was getting CSRF Token Mismatch error. I just need to test some data, so I changed my VerifyCSRFToken Middleware:
<?php
namespace App\Http\Middleware;
use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken as Middleware;
class VerifyCsrfToken extends Middleware
{
/**
* The URIs that should be excluded from CSRF verification.
*
* @var array
*/
protected $except = [
'*'
];
}
But now, I can't get the user session. It gives 401 Unauthorized.
First question: As I'm justing making one small test, is it correct to avoid CSRF token like that example?
Second question: How can I test this correctly, getting the session as I want?
If you are working with a totally separate frontend and backend, you need to generate a token for the authentication (it's different from the CSRF token).
You should have a look at Sanctum.
https://laravel.com/docs/11.x/sanctum#api-token-authentication
https://laravel.com/docs/11.x/sanctum#mobile-application-authentication
@vincent15000 They’re the wrong sections. The OP should be using SPA authentication (https://laravel.com/docs/11.x/sanctum#spa-authentication), not API tokens. And mobile application authentication is not relevant for a Vue front-end web app.
@martinbean Hmmm ... I'm not sure ... he says in his title that the frontend is local and the backend in the cloud.
According to me it's like a mobile application with total separate front and back.
@silvadreamdeal If you have a completely separate Vue front-end then you’re not going to be working with sessions. Look into Sanctum.
@martinbean That's exactly what I thought about.
Sanctum's SPA authentication can only be used between first-party domains (same top-level domain).
In the case of this question, you should use API token authentication.
Forget CSRF.
The default CORS config for Laravel 11 is "Allow requests from all domains below api/*". Leave the default.
How to Connect Vuejs Frontend (local) to Laravel backend (cloud)
A front end is always displayed on users local (browser). I don't quite understand what you are doing.
I'm sorry if this post does not answer your question. But I'm just wondering, why didn't you use InertiaJS?
Thank you all. Thank you @martinbean . You're right.
And just to give answers to some questions, its backend and frontend separate. It doesn't make any difference between mobiles, its a web app
Normally I have the backend and frontend running in my computer, in different ports.
The fact is that I have this app running in my client. After 2 years, he decided to make some visual changes to the frontend. With that, I wanted to connect directly to his database, instead of make a copy of it locally.
Small changes, and as I said, just visual changes. So I wanted to connect to that database running the frontend locally just to get access to the data. It would be more real with that info
Please or to participate in this conversation.