Return to homepage



I geting an error

"Access to XMLHttpRequest at 'http://localhost:8000/home' (redirected from 'http://localhost:8000/login') from origin 'http://localhost:8081' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource."

but followed everything

  • 1

There is a problem with Sanctum auth.

To authenicate user we can use just standart cookie session authentication. With those cookie and XSRF-TOKEN we can come through auth:sanctum middleware to get secret data.

But if we use Bearer token from $user->createToken we could also overcome auth:sanctum middleware. And someone who get this unsecure token could do the same without any session confirm.

Do you have any decision how to solve this security loophole?

  • 1

I follow the example but it didn't work, I'm receiving this error

1Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/login. (Reason: CORS request did not succeed).
  • 0

Great content as always Alex! One bonus video could be how to protect the routes we don't want users to access if not logged in. It should be short but useful.

  • 1

Never mind, I got it working. Turns out I needed to add the port number to the SANCTUM_STATEFUL_DOMAINS configuration since I am running it on a different port on localhost. All working now.

  • 0

I followed everything step by step but for some reason when I hit the /login endpoint, it comes back with

1' "message": "CSRF token mismatch.",
2 "exception": "Symfony\\Component\\HttpKernel\\Exception\\HttpException",

I am not really sure what the problem is and I have gone over the lesson carefully to see if I missed anything out.

my App.vue

2import axios from 'axios'
4export default {
5 methods: {
6 async login() {
7 await axios.get('http://localhost:8000/sanctum/csrf-cookie')
9 await'http://localhost:8000/login', {
10 'email': '',
11 'password': 'password'
12 })
13 }
14 }


1import Vue from "vue";
2import App from "./App.vue";
3import axios from "axios";
5axios.defaults.withCredentials = true;
7Vue.config.productionTip = false;
9new Vue({
10 render: h => h(App)
  • 0

am getting the same error

  • 0

Very useful tutorials, thanks Alex 👨🏽‍💻🚀

  • 0

HI Alex, thanks for the tutorial. But I am missing the basic part. Why Airlock? What it does and why we need that?

  • 5

From Laravel Sanctum docs Laravel Sanctum provides a featherweight authentication system for SPAs (single page applications), mobile applications, and simple, token based APIs.

So basically you need airlock for authentication when you want to keep you frontend and backend separate. So Laravel backend is API only and frontend app can be totally separate project built with something like Vue CLI, Nuxt JS, React, Next JS etc.

The alternative (without airlock) would be serving your vue app from inside the laravel, have login page on the laravel side then have catch all route for vue and use same session for requests made from inside vue. Using Inertia.js is also an option.

  • 0

@Dmitriy, thanks for the explanations. But what about Laravel Passport?

  • 0