Laravel sanctum vue spa being blocked when using ip address

Question

I know a lot has been documented on about laravel sanctum configuration to avoid blocked requests from your spa frontend, but something that is not quite clear and people aren't talking about, (maybe because it's already solved and documented somewhere I haven't seen).

My current configuration works with 127.0.0.1 but when I change both SESSION_DOMAIN and SANCTUM_STATEFUL_DOMAINS but when I change this for the ip address, this doesn't work.

I need to use a shared ip (192.168.45.23:8080), for me to test this on my mobile phone as well but I get the net::ERR_BLOCKED_BY_CLIENT.

What is configured so far

• I have configured cors.php to allow the route I am visiting under paths
• I have SESSION_DOMAIN set to that IP address
• I have also set the SANCTUM_STATEFUL_DOMAINS to that IP address with the port as well.
• I have also uncommented \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class, under the kernel.php

What I am guessing:

• Could it be if you not using localhost, you need to be running under https?

The reason I need to use this IP address,

I want to test my spa on mobile concurrently

Answer 1

When you run your Laravel server with this command,

php artisan serve
Copy

it will run on localhost and will only receive local connections. If you want to access to your Laravel server from another machine inside your private network, I suggest you to run this command instead :

php artisan serve --host=0.0.0.0
Copy

If you want more detail about the difference between localhost and 0.0.0.0, please read this answer

Answer 2

What I am guessing: Could it be if you not using localhost, you need to be running under https?

If you use LIVE site deployed on a hosting server, you can access to SPA on your phone.

It will be not handled on Laravel side. If you wanna test SPA running on localhost using mobile phone,

• List item Run Ngrok to test your local development. https://ngrok.com
• List item You can use Browserstack Localhost to test localhost on mobile(Emulator). https://www.browserstack.com/docs/local-testing