CORS Error when fetching images (maybe only when image comes from AWS)

What version of Next.js are you using?

10.0.2

What version of Node.js are you using?

14.16.1

What browser are you using?

Firefox and Chrome

What operating system are you using?

Ubuntu

How are you deploying your application?

next start

Describe the Bug

The new version of Next seems to be having problems with CORS. I think this error, for some reason I couldn’t figure out, only happens when the image comes from AWS.

Expected Behavior

To check the expected follow these steps:

1. Create a new package

  yarn create next-app bug-next-demo

1. In pages/index.js, place this content:

import Image from 'next/image'

export default function Home() {
  return (
    Image src="https://assets.instabuy.com.br/ib.store.image.medium/m-99852d734ad2478aa05dfeff49e29085.png" width={60} height={60} />
  )
}

1. Set the next.config.js.

  module.exports = {
    images: {
    domains: [
     'assets.instabuy.com.br',
    ]
  }
}

1. Change the next version to 10.0.9

  // package.json
  "dependencies": {
    "next": "10.0.9"
   }

1. After installing the dependencies, and running them on the index page you will check this in your web browser:

To Reproduce

To reproduce, you just need to update next package to 10.2.0 from the expected behavior scenario, as follows:

    "dependencies": {
      "next": "10.2.0",
    }

Now, just re-run the installation and the development execution on the index page of the browser. You will check the following CORS error:

Note:

This image comes from AWS. It doesn’t seem to happen from other sources.

[SarhadSalam]

I don’t think this is a bug. It is not related to the CORS issue.

If you refer to this file at line 193 you can see that a new condition was added to check for the content type header of a response.

After checking the link for the image you provided, the Content-Type header provided by the image is binary/octet-stream and not an image/png as I believe it is required to be to use the Image module provided by Next.js.

In order to fix it, for your S3 bucket change Content-Type of the image your are providing to image and I believe it should work fine 😃

Hopefully that helps!

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.