Search code examples
vue.jscorslumen

Access to XMLHttpRequest from origin has been blocked by CORS policy ( Vue.JS app calling Lumen App )

I'm using a Vue.JS application that is calling an API built with Lumen. I'm always getting the below error whenever the Vue.JS app calls the Lumen API.

enter image description here

Below is a middleware used for CORS in Lumen.

<?php

namespace App\Http\Middleware;

use Closure;

class CorsMiddleware
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        //Intercepts OPTIONS requests
        if($request->isMethod('OPTIONS')) {
            $response = response('', 200);
        } else {
            // Pass the request to the next middleware
            $response = $next($request);
        }

        // Adds headers to the response
        $response->header('Access-Control-Allow-Methods', 'HEAD, GET, POST, PUT, PATCH, DELETE');
        $response->header('Access-Control-Allow-Headers', $request->header('Access-Control-Request-Headers'));
        $response->header('Access-Control-Allow-Origin', '*');

        // Sends it
        return $response;
    }
}

I have this added in the .htaccess file of lumen in public folder

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

UPDATE 1 the ajax request header from chrome's network tab:-

enter image description here

I'm using:

PHP Version: 5.6

Development Environment: Homestead (Apache)

Solution

  • Solved now after adding 

    header('Access-Control-Allow-Headers: *');

    instead of 

    header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');

    in the CORS middleware.