Laravel API blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

I've laravel rest API application that connects with the Vue js frontend.

Rest API endpoint domain is dev.mydomain.com and images are host in s3 bucket that subdomain is dev-assest.mydomain.com

When the application loads the page with an image it gives below error. However, image is losing when checking the image URL

Access to fetch at 'https:// dev-assest.mydomain.com/images/profiles/profile_5bb3d976f12.jpeg' from origin 'https://ift.tt/2y2OlIp' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

In Laraval backed added cors as below. Cors.php

namespace App\Http\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)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin', '*')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
            ->header('Access-Control-Allow-Headers',' Origin, Content-Type, Accept, Authorization, X-Request-With')
            ->header('Access-Control-Allow-Credentials',' true');
    }
}

And Kernal.php

 protected $routeMiddleware = [
        'cors' => \App\Http\Middleware\Cors::class,
    ];

Vue frontend also added below in vue.config.js file

devServer: {
            headers: { 'Access-Control-Allow-Origin': '*' }
        }

Is there any other way to fix this issue?

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2K133ZH
via IFTTT