CORS image in S3

[thinhbg2812-2]

Description

Access image from s3 has been blocked by CORS even have crossorigin="anonymous"

System and Tech

• MacOS 11.2.1
• Nextjs 10.0.0

Steps to check or reproduce

• Create new PanoView with image is new Image()

const PanoComponent:FC<Props> = ({ src }) => {
  const [containerRef, setContainerRef] = useState<HTMLDivElement | null>()
  useEffect(() => {
    if (!containerRef) {
      return undefined
    }
    const srcImage = new Image()
    srcImage.crossOrigin = 'anonymous'
    srcImage.src = src
    // eslint-disable-next-line no-new
    const panoViewer = new PanoViewer(
      containerRef,
      {
        image: srcImage,
        projectionType: 'panorama',
        gyroMode: 'yawPitch',
      },
    )
    const { PanoControls } = window as any
    if (!PanoControls) {
      setContainerRef(containerRef)
      return
    }
    PanoControls.init(containerRef, panoViewer, { enableGyroOption: true, enableTouchOption: true })
    PanoControls.showLoading()
  }, [containerRef, src])

  return (
    <div className="w-100 h-100">
      <div
        ref={ref => setContainerRef(ref)}
        className="w-100 h-100"
        style={{ position: 'relative' }}
      />
    </div>
  )
}

export default PanoComponent

and called Pano Component

<Pano src="https://recbook-dev.s3.ap-southeast-1.amazonaws.com/fd75fc7fe1f2415ebe7d187ff9d3febfphoto-1509225770129-fbcf8a696c0b.jpeg" />

But result is CORS

[WoodNeck]

Hello @mrtk0y! The reason why the image is CORS blocked is there's no Access-Control-Allow-Origin on the response header of your image server. You can try those solutions:

• https://stackoverflow.com/questions/17533888/s3-access-control-allow-origin-header

[thinhbg2812-2]

Sir, it's not the S3 i tried the CDN image random on google , and it's same result

[WoodNeck]

PanoViewer's images always should be loaded with the CORS setting as it's drawed on the canvas via WebGL. Without it, you'll meet "Tainted canvases may not be loaded" error and the image won't be rendered because of the CORS issue.

• https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

The other CDN images you've tried are blocked for the same reason. Like I've said, you must set Access-Control-Allow-Origin to "*" or specific URLs on the response header of your image server, or you can't use it by any means.

[WoodNeck]

Also, crossorigin="anonymous" means it'll use CORS mode, not disabling it.

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/crossOrigin

[thinhbg2812-2]

Ye, i requested Backend to add the crossOrigin to S3, and it's working fine now. Tks for your support sir <3