Chrome fails to load some toppings images from S3 due to incomplete CORS policy

[stevefuzzy]

When pulling images from S3, I was getting CORS errors on the first 3 toppings, but not the rest of the images, which is kinda strange. Looking into it I learned that the CORS policy XML must also contain: <AllowedMethod>HEAD</AllowedMethod>

You should update the PluralSight course to reflect that.

[kevinbojarski]

Adding this to the CORS policy still gives me an error in Chrome

My policy now is:

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>HEAD</AllowedMethod>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Chrome error:

Access to image at 'http://{bucket}/toppings/mozzarella_cheese.png' (redirected from 'http:/{bucket}/toppings/mozzarella_cheese.png') from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[qchero]

I am also getting this issue in Chrome and Edge in Win10 which is really weird. The only reason this happens to only the first 3 toppings seems to be that the preview and the image are the same. But I am not a JavaScript expert so I don't know the implication of that.

create('Dough Crust', 'dough_crust.png', 'dough_crust.png', 1) create('Marinara Sauce', 'marinara_sauce.png', 'marinara_sauce.png', 2) create('Mozzarella Cheese', 'mozzarella_cheese.png', 'mozzarella_cheese.png', 3) create('Cheddar Cheese', 'cheddar.png', 'cheddar_cheese.png', 4) create('Mushrooms', 'mushroom.png', 'mushrooms.png', 5) create('Pepperoni', 'pepperoni.png', 'pepperonis.png', 6) create('Laser Beams', 'laser_beam.png', 'laser_beams.png', 7) create('Banana Peppers', 'banana_pepper.png', 'banana_peppers.png', 8) create('Ham', 'ham.png', 'hams.png', 9) create('Green Peppers', 'green_pepper.png', 'green_peppers.png', 10) create('Rainbows', 'rainbow.png', 'rainbows.png', 11) create('Money', 'money.png', 'moneys.png', 12)

[bsgrigorov]

My CORS config is the same as in the course.

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>

Not sure how to fix the issue with the 3 toppings, but a workaround is to create copies of the 3 and change the create method calls:

create('Dough Crust', 'dough_crust_1.png', 'dough_crust.png', 1)
create('Marinara Sauce', 'marinara_sauce_1.png', 'marinara_sauce.png', 2)
create('Mozzarella Cheese', 'mozzarella_cheese_1.png', 'mozzarella_cheese.png', 3)