CODEWITHSUNDEEP
laravelvue.jsheadercorshttp-headers
Niels Lucas
Niels Lucas

Reputation: 759

Laravel + Vue/axios Api call to subdomain access-control-allow-origin

I know there is a lot of information about this kind of stuff. But I do get a bit confused about a lot of things. First of all. If I have an laravel API on api.example.com and my Vue project on www.example.com

So from www.example.com I do an API call to api.example.com. So where should I handle this error? I already added the headers to my Axios config like so:

axios.defaults.headers.common = {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Credentials": "true"
};

After some reading I read you have to handle this server side. So I tried installing 

composer require barryvdh/laravel-cors

but it gives me this:

Command "optimize" is not defined.

So okee maybe there is something wrong with my composer or the library idk. But before I waste another couple of hours with this. I would like to ask a bit more information about what the applications are asking for and maybe even how to fix this issue.

Upvotes: 1

Views: 1529

Answers (1)

Yash Pokar
Yash Pokar

Reputation: 5451

You've set the access controls in api client, where you have to put it inside the server means in laravel.

Your server will decide whom to serve. not your clients will decide weather they should use means VueJS.

add cors middleware in laravel

<?php 

namespace App\Http\Middleware;

use Closure;

class CorsMiddleware
{
    public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin', '*')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
    }
}

You'll good to go.

Upvotes: 1

Related Questions