CODEWITHSUNDEEP
laravelvue.jssingle-page-applicationvue-clilaravel-sanctum
MGS
MGS

Reputation: 456

Laravel Sanctum Vue SPA CORS issue

I've setup a VUE frontend which connects and authenticates perfectly well with a Laravel backend, using sanctum. I'm able to login and successfully retrieve the logged in user by visiting /api/user. I believe I've followed all the config steps stated in the documentation. Here is sanctum.php config for stateful domains:

'stateful' => explode(
    ',',
    env(
        'SANCTUM_STATEFUL_DOMAINS',
        'localhost,localhost:3000,localhost:8080,127.0.0.1,127.0.0.1:8080,::1'
    )
), //this is what is in my env SANCTUM_STATEFUL_DOMAINS=app.foo-bar.test:8080
//my laravel backend is running on foo-bar.test

Here is my session.php config:

'domain' => env('SESSION_DOMAIN', null), //in my .env I have: SESSION_DOMAIN=.foo-bar.test

I have the sanctum middleware setup in http/kernel.php, and I'm using auth:sanctum in my routes

Here is my cors.php config:

 'paths' => ['api/*', 'sanctum/csrf-cookie', 'login', 'logout'],

'allowed_methods' => ['*'],

'allowed_origins' => ['*'],

'allowed_origins_patterns' => [],

'allowed_headers' => ['*'],

'exposed_headers' => [],

'max_age' => 0,

'supports_credentials' => true,

and in my vue frontend, I've configured axios to use the following

axios.defaults.baseURL = 'http://foo-bar.test';
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
axios.defaults.withCredentials = true;

As I mentioned, I'm able to successfully login, and even visit /api/user. All works fine, But when I make a post request to: api/users/multiple, I get the CORS error: Access to XMLHttpRequest at 'http://foo-bar.test/api/users/multiple' from origin 'http://app.foo-bar.test:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I'm out of ideas, as it seems I've done all the necessary config. Perhaps I'm missing something ? Any help is appreciated.

Kind regards

Upvotes: 2

Views: 4395

Answers (2)

MGS
MGS

Reputation: 456

What I came to realise was that this was not actually a CORS issue. If it was a CORS issue, I would not have been able to login, or visit the API that returns the currently logged in user. What actually happens is that, chrome sometimes fails to report 500 errors on the API and rather returns CORS errors. When I tried making the API call on Firefox, I was able to actually see the 500 error. Once I resolved the 500 error, the CORS error also stopped appearing in chrome. What I've seen from this is that the network request error reporting on Firefox is more reliable than that on chrome

Upvotes: 0

Sehrish Waheed
Sehrish Waheed

Reputation: 1555

Add a middleware

php artisan make:middleware Cors

In app/Http/kernel.php paste this in $middleware

protected $middleware = [  
    \App\Http\Middleware\Cors::class,
     ....
];

In Middleware/Cors.php now add

 public function handle(Request $request, Closure $next)
 {
    return $next($request)->header('Access-Control-Allow-Origin', '*')
    ->header('Access-Control-Allow-Methods','GET, POST, PUT, PATCH, DELETE, 
     OPTIONS')
    ->header('Access-Control-Allow-Headers','Origin, X-Requested-With, Content- 
     Type, Accept, Authorization');
 }

Upvotes: 1

Related Questions