Axios: Network Error with Vuejs

Question

I'm making an axios call from localhost:8080(front-end) to localhost:8000(back-end).

The front-end is written with vue,webpack and node while the back-end is lumen-laravel framework.

That's the call:

mounted() {
        axios.get('localhost:8000/getParentela').then((r) => {
            console.log(r.data);
            this.albero = r.data;
        }).catch((e) => {
            console.log(e);
        });
    },

The error that the call returns is:

I tought that maybe it was because of the CORS so i put a middleware in my back-end.

That's it:

<?php
namespace App\Http\Middleware;
use Closure;
use Illuminate\Http\Response;
class CORSMiddleware
{
    /**
     * Handle an incoming request.
     *
     * @param \Illuminate\Http\Request $request
     * @param \Closure                 $next
     *
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        // TODO: Should check whether route has been registered
        if ($this->isPreflightRequest($request)) {
            $response = $this->createEmptyResponse();
        } else {
            $response = $next($request);
        }
        return $this->addCorsHeaders($request, $response);
    }
    /**
     * Determine if request is a preflight request.
     *
     * @param \Illuminate\Http\Request $request
     *
     * @return bool
     */
    protected function isPreflightRequest($request)
    {
        return $request->isMethod('OPTIONS');
    }
    /**
     * Create empty response for preflight request.
     *
     * @return \Illuminate\Http\Response
     */
    protected function createEmptyResponse()
    {
        return new Response(null, 204);
    }
    /**
     * Add CORS headers.
     *
     * @param \Illuminate\Http\Request  $request
     * @param \Illuminate\Http\Response $response
     */
    protected function addCorsHeaders($request, $response)
    {
        foreach ([
            'Access-Control-Allow-Origin' => '* ',
            'Access-Control-Max-Age' => (60 * 60 * 24),
            'Access-Control-Allow-Headers' => $request->header('Access-Control-Request-Headers'),
            'Access-Control-Allow-Methods' => $request->header('Access-Control-Request-Methods')
                ?: 'GET, HEAD, POST, PUT, PATCH, DELETE, OPTIONS',
            'Access-Control-Allow-Credentials' => 'true',
        ] as $header => $value) {
            $response->header($header, $value);
        }
        return $response;
    }
}

I still think that it's the CORS because if a call the API directly with localhost:8000 it works..

I read that maybe it was ublock that blocked the request so i disabled it but nothing changes.

But the error persist and i know what to do. Thanks.

Solution

I solved my error using http

Error while using only: localhost:3000/api/product/getAllProducts

Solved By: http://localhost:3000/api/product/getAllProducts