0

I am trying to show an image or a document coming from an AWS S3 Pre-Signed URL in my react application. Following is my code.

this.props.getS3SignedURL(key).then(url=> {
    this.setState({ isLoading: false, error: "", url: url});
    window.location = url;
}, err => {
    //err
});

It works without any issue in Google Chrome, it displays the document. But in Microsoft Edge and IE the location doesn't change.

I tried with encodeURI(), encodeURIComponent() and window.location.href all combinations. But can't get it to work in Edge and IE. I tried with google document viewer as mentioned here. Still it's not working, and I suspect whether I can user Google document viewer because the document coming from the url can be an image/pdf/xls etc.

Deepan Cool
  • 476
  • 1
  • 6
  • 16
  • Does it return any errors? Or does it just not show the document? – rickjerrity Feb 08 '18 at 19:37
  • The error is : Unhandled promise rejection Error: A security problem occurred. When I type window.location="s3-presigned-url" it says permission denied. For other urls like google.com it works perfectly. – Deepan Cool Feb 08 '18 at 19:44

1 Answers1

0

Based on your comment about unhandled promise rejection, one thing I'd recommend is try the more common method of handling errors of a promise, like below:

this.props.getS3SignedURL(key)
  .then(url => {
    this.setState({ isLoading: false, error: "", url: url });
    window.location = url;
  })
  .catch(err => {
    console.log(err);
  });

Other then that, you may want to check that it's not a SOP issue or a CORS issue.

rickjerrity
  • 804
  • 1
  • 9
  • 15