How to remove CROSS ORIGIN (CORS) policy issue with fetch() method when use Amazon S3 file URL?

  laravel, vue.js

I have stuck at the problem of CORS origin coming from Amazon S3.
I have a project where I am uploading images as well as PDF files to the Amazon S3 bucket using Laravel and Vue. Whenever I am fetching PDF files it will fetch out without any error but whenever I am fetching images it gives me an error written below of CORS origin.

Access to fetch at 'AWS_END_POINT_URL/uploads/standard_plan/pdf_image/3ccc4ea4_7a98_4cf9_a687_10a888bb27e5.jpg' from origin 'http://localhost' 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.

I have tried this code for fetching the files:-

const arrBuffer = await fetch(`${AWS_END_POINT_URL}/uploads/standard_plan/pdf_image/3ccc4ea4_7a98_4cf9_a687_10a888bb27e5.jpg`).then(res => res.arrayBuffer())

Sometimes I am not getting the access-control-allow-origin: * for images in the Response header of the Chrome browser network tab but it was getting in the Mozilla Firefox browser for the same request as shown in the images below.

Image with Access-Control-Allow-Origin: * in the Response header

Image without Access-Control-Allow-Origin: * in the Response header

Please help me out!

Source: Laravel

Leave a Reply