CORS error when fetch image from S3

[AkiraNoob]

*note: ImageDisplay is my custom image display

I faced this issue while working in my own project although in S3 i set Accpet-Control-Allow-Origin to '*' (image 3). I found out that if i write a fetch method to that s3 url its still face the same error but when i set mode: 'no-cors' it success. Anyone can explain why for me :( is there any way to work around or to set no-cors mode to reac-doc-viewer?

This is my first time submit an issue so plz appologize for any mistakes, thank you guys a lot.

[jamesmart77]

TLDR; You are doing a cross-origin request, even though no-cors is set. That config simply allows the request to go through, but you'll still see the error (which is actually a warning).

---

I've experienced a similar issue on a different project. By performing a fetch from your client, from your DocViewer, you are doing a cross-origin call. This is typically against common practice because of the potential security vulnerabilities that are invited.

However, if you have the correct controls in place, this can be perfectly legitimate. If your scenario was anything like mine, the fetch was perfectly fine, but the errors in the console are more so an FYI, "Be advised...", type of thing.

Check out the MDN Fetch resource.

[DenkyOgbonnaya]

Adding prefetchMethod="GET" resolved the CORS issue for me.

[BenElferink]

I'm experiencing this too. I have a valid URL from AWS S3, which fetches fine when pasted in the browser.

But when Doc Viewer tries to make the request, it fails on CORS and no file is shown (infinite loading). I tried the above of adding prefetchMethod="GET", it did not resolve the issue.

[AkiraNoob]

hi guys, sorry for late reply, i have solved it by remove region prefix in s3 presigned URL, in my case is SEA, maybe u can try

[Jova266]

I'm experiencing this too. I have a valid URL from AWS S3, which fetches fine when pasted in the browser.

But when Doc Viewer tries to make the request, it fails on CORS and no file is shown (infinite loading). I tried the above of adding prefetchMethod="GET", it did not resolve the issue.

Have you managed to resolve this issue? I have the same one @BenElferink

[ermarkar]

anybody got the solution? same url works if img tag i use

tried removing region from url and adding prefetch method, it is throwing cors error but i dont know how this is working with img tag

[BenElferink]

I'm experiencing this too. I have a valid URL from AWS S3, which fetches fine when pasted in the browser. But when Doc Viewer tries to make the request, it fails on CORS and no file is shown (infinite loading). I tried the above of adding prefetchMethod="GET", it did not resolve the issue.

Have you managed to resolve this issue? I have the same one @BenElferink

Nope, still unresolved.

[ermarkar]

I'm experiencing this too. I have a valid URL from AWS S3, which fetches fine when pasted in the browser. But when Doc Viewer tries to make the request, it fails on CORS and no file is shown (infinite loading). I tried the above of adding prefetchMethod="GET", it did not resolve the issue.

Have you managed to resolve this issue? I have the same one @BenElferink

Nope, still unresolved.

i exposed a new api from my server and it worked, but still signed urls not working

@ApiBearerAuth()
  @Get("/docs/preview")
  async getEnquiryDoc(@Query('key') key: string, @Res() res: any): Promise<any> {
    try {
      const s3Object = await this.s3Servcice.getObject(key);
      // Determine the content type based on the file extension or your specific logic
      const contentType = 'application/octet-stream';

      res.setHeader('Content-Disposition', `attachment; filename=${key}`);
      res.setHeader('Content-Type', contentType);
      res.setHeader('Content-Length', s3Object.length);
      res.send(s3Object);

    } catch (err) {
      throw err;
    }
  }

/**
   * Get an S3 object based on the provided key.
   * @param {string} key The object key (filename) in the S3 bucket.
   * @returns {Promise<Buffer>} The content of the S3 object as a Buffer.
   */
  async getObject(key: string): Promise<Buffer> {
    const params = ({
      Bucket: this.bucketName,
      Key: key,
    });

    const response = await this.s3.getObject(params).promise();
    return response.Body as Buffer;
  }