Unable to get access from S3

[Franco8888]

I take an URL from s3 and add it to the picker's _imageSrc attribute, but I am getting the following error: has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

If I add the image to an img tag then it works and if I take a random image form the internet as the picker's _imageSrc then it works. But the documentation doesn't state how it get's access to the image, i.e. post, put, etc.?

Here are my S3 settings:

Policy:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::********s"
            },
            "Action": [
                "s3:ListBucket",
                "s3:Get*",
                "s3:Put*",
                "s3:*"
            ],
            "Resource": "arn:aws:s3:::******"
        },
        {
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::******/*"
        }
    ]
}

CORS settings:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE",
            "HEAD",
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "Access-Control-Allow-Origin"
        ]
    }
]

Picker's code:

<ngp-image-picker
            ($imageChanged)="onImageChanged($event, i)"
            [_config]="config"
            [_imageSrc]="picker.imageSource"
            ></ngp-image-picker>

The picker.imageSource is the s3 URL e.g. https://ecomzabucket.s3.af-south-1.amazonaws.com/Onyx-Max-5000-Puff-Disposable-Rechargeable-img-main

What should be adjusted to the settings of s3 so that the picker gets access to the image/resource?

[josealejandro2928]

I will have a look at this issue. Please, provide me such a link to test it locally. Also you can contribute. Fork the project and tray to see. The access to the image it's through an canvas which instantiate a IMG element. And i remember I have to pass a certain settings in order to resolve that issue, for general links because on the end the img was not inserted into the DOM and by default the browser could block that like a possible attack? Do you understand the context. Now we have to see why the S3 and the kind of request this strategy is performing that doesn't fullfil all the security requeriment of S3

[josealejandro2928]

I was reading about ypur issue, You should try with this CORS configuration: [ { "AllowedHeaders": [ "" ], "AllowedMethods": [ "GET" ], "AllowedOrigins": [ "" ], "ExposeHeaders": [] } ] I think the difference with yours is the ExposeHeaders option. https://stackoverflow.com/questions/50022326/amazon-s3-image-cors-issue

[Franco8888]

I updated my CORS settings as you suggested, but I'm still get the same error. It works with an img tag

Here are my updated settings:

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

The full error states: Access to image at 'https://ecomzabucket.s3.af-south-1.amazonaws.com/Geekvape-L200-(Aegis-Legend-2)-Classic-Kit-img-main' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

_ERROR Error: Uncaught (in promise): Error loading the src = https://ecomzabucket.s3.af-south-1.amazonaws.com/Geekvape-L200-(Aegis-Legend-2)-Classic-Kit-img-main at resolvePromise (zone.js:1211:31) at resolvePromise (zone.js:1165:17) at zone.js:1278:17 at _ZoneDelegate.invokeTask (zone.js:406:31) at core.mjs:23999:55 at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:23999:36) at _ZoneDelegate.invokeTask (zone.js:405:60) at Object.onInvokeTask (core.mjs:24300:33) at ZoneDelegate.invokeTask (zone.js:405:60) at Zone.runTask (zone.js:178:47)

Here is a link to an S3 item if you want to test it: https://ecomzabucket.s3.af-south-1.amazonaws.com/Geekvape-L200-(Aegis-Legend-2)-Classic-Kit-img-main

[Franco8888]

I can't seem to run the project. I Forked it, cloned it.

Then did npm install --legacy-peer-deps in root.

Then I try ng serve -o, which give errors.

It seems it can't reference the ngp-image-iocker library from the test-app project.

How do I solve this?

[josealejandro2928]

Once yo have a successfully npm install. You have to run the compilation of the library which is located in the lib folder. Go to the package json and you will see the command to start the dev mode for the library. I think is yarn test-library. Then run ng serve in another command tab, that will run the example project. Then you have the environment ready

[fullstact69]

Hey, Bro. the CORS problem of S3 image was fixed? what is the way to resolve it? Always CORS error though the permission is allowed.

[josealejandro2928]

Yep it's has been like this since q while. I need support from community to fix it

On Wed, Jul 10, 2024, 9:36 AM ENGINEER @.***> wrote:

Hey, Bro. the CORS problem of S3 image was fixed? what is the way to resolve it? Always CORS error though the permission is allowed.

— Reply to this email directly, view it on GitHub https://github.com/josealejandro2928/ngp-image-picker/issues/39#issuecomment-2219772855, or unsubscribe https://github.com/notifications/unsubscribe-auth/AI2QHWK5X6QU7BUKMI677Z3ZLTP6ZAVCNFSM6AAAAABKUJYEHOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMJZG43TEOBVGU . You are receiving this because you commented.Message ID: @.***>