Access to fetch has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

I am using a laravel backend with a gatsby frontend. I want to fetch an image with axios http get request from the public folder of the laravel backend.

Here is my CORS middleware

        $response = $next($request);

    $response->headers->set('Access-Control-Allow-Origin' , '*');
    $response->headers->set('Access-Control-Expose-Headers' , 'Access-Control-Allow-Origin');
    $response->headers->set('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT, PATCH, DELETE');
    $response->headers->set('Access-Control-Allow-Headers', 'Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers,X-Access-Token,XKey,Authorization');

    return $response;

And below is the fetch request

      fetch("https://quickrent.herokuapp.com/images/posts/20190506162816.jpg", {method:'GET'})
        .then(response => response.text())
        .then(result => console.log(result))
        .catch(error => console.log('error', error));
    }

score 0 · Answer 1 · answered May 14 '20 at 07:10

0

I don't see Access-Control-Allow-Origin in the response headers set. Are you sure you made it right in Laravel?

answered May 14 '20 at 07:10

vitkarpov

399
2
8

Thank you **vitkarpov**, yes the image shows up when accessed using the browser url put when javascript fetch request is used, it gets blocked by CORS – The Edo Full Stack Developer May 15 '20 at 04:34

score 0 · Answer 2 · answered May 14 '20 at 07:20

Try this in your Middleware:

header('Access-Control-Allow-Origin: *');
        header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
        header('Access-Control-Allow-Headers: Content-Type, Accept, Authorization, X-Requested-With, X-Auth-Token, Origin, Application');
        return $next($request);

Kernel.php

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

let me know if it helps! Or You can See Here Laravel 5.1 API Enable Cors

Access to fetch has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

2 Answers2