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

[kelvz-hub]

Hi I used advanced-cropper to crop image from amazon s3 bucket but CORS policy issue shown. Is there another way to do this?

[Norserium]

@kelvz-hub, does this guide answer on your question?

[kelvz-hub]

@kelvz-hub, does this guide answer on your question?

It works when the image is from local computer but my problem is I get the image from s3 bucket

[Norserium]

@kelvz-hub, well, it's the common issue with AWS. Try to set CORS configuration on that side correctly: https://docs.aws.amazon.com/AmazonS3/latest/userguide/cors-troubleshooting.html.

The guide answers why it happens.

[kelvz-hub]

@kelvz-hub, well, it's the common issue with AWS. Try to set CORS configuration on that side correctly: https://docs.aws.amazon.com/AmazonS3/latest/userguide/cors-troubleshooting.html.

The guide answers why it happens.

I set cors config in s3 bucket but not working [ { "AllowedHeaders": [ "" ], "AllowedMethods": [ "GET" ], "AllowedOrigins": [ "" ], "ExposeHeaders": [ "Access-Control-Allow-Origin" ], "MaxAgeSeconds": 3000 } ]

[Norserium]

1. Check that your link opens in the browser.
2. Try to set the following config for CORS policy:

   [
   {
       "AllowedHeaders": [
           "*"
       ],
       "AllowedMethods": [
           "POST",
           "GET",
           "PUT",
           "DELETE",
           "HEAD"
       ],
       "AllowedOrigins": [
           "*"
       ],
       "ExposeHeaders": []
   }
   ]

[Norserium]

@kelvz-hub

[kelvz-hub]

[ { "AllowedHeaders": [ "" ], "AllowedMethods": [ "POST", "GET", "PUT", "DELETE", "HEAD" ], "AllowedOrigins": [ "" ], "ExposeHeaders": [] } ]

i tried but no luck

[Norserium]

@kelvz-hub, does the passed link opens in the browser? Try to click at the link in the error. Also, try to disable canvas property and check if the image loads:

<cropper :canvas="false"/>

[kelvz-hub]

:canvas="false"

Hi thanks for the reply the image show but i cant get the cropped image now the error is "Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'toDataURL')"" and my code when crop button clicked is:

const result = this.$refs.cropper.getResult(); const crop = result.canvas.toDataURL( "image/jpg" );

How to get the cropped image if I set the canvas to false?

[Norserium]

@kelvz-hub, if you set canvas to false, the canvas won't be available, so you can't get the cropped image. It's okay, it was just for check.

Could you remove that property and send me the details of the image loading request? Like this:

Hide the private headers, by the way.

[kelvz-hub]

@kelvz-hub, if you set canvas to false, the canvas won't be available, so you can't get the cropped image. It's okay, it was just for check.

Could you remove that property and send me the details of the image loading request? Like this:

Hide the private headers, by the way. Here's the result

[Norserium]

@kelvz-hub, look, there is no Access-Control-Allow-Origin header. The problem on the storage configuration side. Try to check the section "Troubleshooting CORS methods".

[kelvz-hub]

@kelvz-hub, look, there is no Access-Control-Allow-Origin header. The problem on the storage configuration side. Try to check the section "Troubleshooting CORS methods".

It shows that i configured it correctly

[Norserium]

@kelvz-hub, it's definitely strange. Try to use that image in the sandbox.

[kelvz-hub]

@kelvz-hub, it's definitely strange. Try to use that image in the sandbox.

Hi, I have an update to this issue I passed query parameter as part of the image url like this https://image/folder/test.png?test=true and it works but i want to know why this works

[Norserium]

@kelvz-hub, it looks like your image was cached before you set the correct CORS settings at the Amazon Storage.

[Norserium]

Try to reproduce this issue in the private browsing mode.

[kelvz-hub]

Try to reproduce this issue in the private browsing mode.

I tried it in google incognito but also show cors issue without the query parameter.

[Norserium]

@kelvz-hub, I've tried your image in the sandbox and it works without any query parameters.

Could you provide the screenshot of response headers for both image requests?

[kelvz-hub]

@kelvz-hub, I've tried your image in the sandbox and it works without any query parameters.

Could you provide the screenshot of response headers for both image requests?

yes I also tried it in the sandbox and it works only in my end is not working

[Norserium]

@kelvz-hub, well it's strange. Does it work with any query parameter on your side? Did you try to reproduce this issue in an another browser?

[Norserium]

Cold you send me the response headers for the both image requests when this issue reproduces?

[Norserium]

@kelvz-hub, any news?

[kelvz-hub]

@kelvz-hub, it's definitely strange. Try to use that image in the sandbox.

Hi, I have an update to this issue I passed query parameter as part of the image url like this https://image/folder/test.png?test=true and it works but i want to know why this works

@Norserium I used this solution

[Norserium]

@kelvz-hub, it's barely solution, because we don't know why it works. Anyway, I close this issue, but feel free to reopen it if the issue returns.

[vlad909]

its's very strange solultion, guys

[Norserium]

@vlad909, did you encounter the same issue?

[vlad909]

@Norserium hello. oh yes. i've disable canvas option. it's work. i don't know what's going on. it's perfectly works in dev server with canvas, but production is broken. i tried to find a problem with nginx but it is not critically different from dev

[Norserium]

@vlad909, I assume that you use a proxy in the development environment so you bypass cross origin troubles by this way. Do you?

[Norserium]

In any case I'm sure that it's the server configuration issue, I've described the details in the guide.

If you need help in its resolution send the Nginx configs + the image request response headers (for both development and production).

[theo-bittencourt]

@kelvz-hub, it looks like your image was cached before you set the correct CORS settings at the Amazon Storage.

Having this issue as well. Seems it is caused by browser cache, indeed.

First request (good)

Second request (fail)

Fail reason: Access to image at ... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Note: The Request URL is identical the first request.

[theo-bittencourt]

Fixed here. Just added crossorigin attr on <img> that we utilized for "preview" (before crop activation). That preview was responsible for the first request (cached because the missing crossorigin).

[mattpepin-funeraweb]

Fixed it by patching image.ts, replacing XmlHttpRequest with fetch and forcing a reload:

                    fetch(img, {
                        cache: 'reload'
                    }).then(response => {
                        if (response.ok) {
                            return response.arrayBuffer();
                        } else {
                            reject('Error: invalid response');
                        }
                    }, reject).then(buffer => resolve(buffer), reject);