CORS Request to S3 Accepted for File Display but Not for Load by Javascript Library

Question

I'm developing a small javascript browser script that retrieves files from S3.

I can display the images in an tag without any issue after requesting a SignedUrl to S3. To do so I updated the CORS policy on S3:

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

However when I want to use the same URL to extract the EXIF data (using ExifReader), I get an error message about CORS policy:

Access to fetch at '*SIGNEDURL*' from origin 'null' 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 don't understand the difference in the behaviour of both. Can someone help?

Thank you

Answer 1

Only content loaded by a <script> is subject to CORS restrictions, but content loaded directly by the DOM is not.

Without seeing how you're generating the link, it's hard to give a definitive answer. A simple way to debug the issue is to simply add the crossorigin attribute to your image tag, like <img src="..." crossorigin />. If it stops rendering, then the issue is with the link.

Your configuration looks correct. The most common reason remaining is that you haven't specified the region when presigning the url. The signed url should look like: https://s3.us-east-1.amazonaws.com (or whatever region your bucket is in), not https://s3.amazonaws.com

Here is an example with the v3 client

import { GetObjectCommand, S3Client } from '@aws-sdk/client-s3';
import { getSignedUrl } from '@aws-sdk/s3-request-presigner';

// ...
const s3Client = new S3Client({
  region: 'us-east-1', // <--- NEED THIS
});

const command = new GetObjectCommand({
  Bucket: 'YOUR_BUCKET',
  Key: 'YOUR_OBJECT_KEY',
});

const url = await getSignedUrl(s3Client, command, {
  expiresIn: 3600,
});

Or with the old client:

import AWS from 'aws-sdk';

// ...
const s3Client = new AWS.S3({
  region: 'us-east-1', // <--- NEED THIS
});

const url = s3Client.getSignedUrl('getObject', {
  Bucket: 'YOUR_BUCKET',
  Key: 'YOUR_OBJECT_KEY',
  Expires: 3600,
});