How to fix 'Access-Control-Allow-Origin' issue in Laravel?

Question

I have a Laravel project and now I need an image download function to download an image what I already uploaded to amazon through my project. After setup a download function and download button to download a particular image, the console shows the following error.

Failed to load 'image-url': No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost-virtual-servel' is therefore not allowed access.

This is the download function which is found from stackoverflow:

<a class="download-btn" data-href="image-url" download><span class="a2a_svg"></span></a>

function forceDownload(link){
    var url = link.getAttribute("data-href");
    var fileName = link.getAttribute("download");
    link.innerText = "Working...";
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = "blob";
    xhr.onload = function(){
        var urlCreator = window.URL || window.webkitURL;
        var imageUrl = urlCreator.createObjectURL(this.response);
        var tag = document.createElement('a');
        tag.href = imageUrl;
        tag.download = fileName;
        document.body.appendChild(tag);
        tag.click();
        document.body.removeChild(tag);
        link.innerText="Download Image";
    }
    xhr.send();
}

I created a middleware to set 'Allow-access-control-Origin' header as all (*) as follows

Middleware:

<?php

namespace App\Src\Modules\Common\Middleware;

use Closure;

class cors {

    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        header("Access-Control-Allow-Origin: *");

        // ALLOW OPTIONS METHOD
        $headers = [
            'Access-Control-Allow-Methods'=> 'POST, GET, OPTIONS, PUT, DELETE',
            'Access-Control-Allow-Headers'=> 'Content-Type, X-Auth-Token, Origin'
        ];
        if($request->getMethod() == "OPTIONS") {
            // The client-side application can set only headers allowed in Access-Control-Allow-Headers
            return Response::make('OK', 200, $headers);
        }

        $response = $next($request);
        foreach($headers as $key => $value)
            $response->header($key, $value);
        return $response;
    }

}

Kernal.php:

protected $routeMiddleware = [
        'cors' => \App\Src\Modules\Common\Middleware\cors::class,
    ];

Routes:

Route::get('my_page', array('middleware' => 'cors', 'as'=>'my.page-get','uses'=>'MyController@getMyPage'));

But the error is still there. How can I fix this??

Answer 1

put this code on top in routes/api.php or if you wrote your routes in routes/web.php

 use Illuminate\Http\Request;

   header('Access-Control-Allow-Origin:  *');
   header('Access-Control-Allow-Methods:  POST, GET, OPTIONS, PUT, DELETE');
   header('Access-Control-Allow-Headers:  Content-Type, X-Auth-Token, Origin, Authorization');

it will be working fine for you.

Answer 2

Try adding header("Access-Control-Allow-Origin: *"); also in your $headers Array.