CORS error when hitting generateEmbedUrlForRegisteredUser API through AWS Quicksight SDK

Question

Hi Team,

I have followed the QuickSight Developer Portal 5 and coded for embedded console, Now when the code hits the generateEmbedUrlForRegisteredUser from my react app i am getting the CORS error. The same CORS error appears while i am connecting to S3 bucket from my react app,  I see the bucket is enabled with CORS.

I am using aws-quicksight-sdk and coded in JS on my React App the same from generateEmbedUrlForRegisteredUser 5 then ran the application from my local, as well as I have deployed the app to aws amplify and tried running, I am getting the following error. Can someone please help me on resolving the issue?

Acess to XMLHttpRequest at ‘https://quicksight.us-east-1.amazonaws.com/accounts/385817851343/embed-url/registered-user 1’ from origin 'http://localhost:3000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
xhr.js:81 POST https://quicksight.us-east-1.amazonaws.com/accounts/385817851343/embed-url/registered-user 1 net::ERR_FAILED
handle

Answer

Without knowing how you're serving your react app (express? node?) the `localhost` address is going to be needed to be added to the CORS rules for the services involved if you're going to be testing locally from your machine. If you're hosting on amplify, you'll need to add the server address to the list similarly.

The following docs can serve as a starting point to solving your CORS issue:
https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/cors.html
https://repost.aws/knowledge-center/s3-configure-cors
https://repost.aws/knowledge-center/api-gateway-cors-errors
https://repost.aws/knowledge-center/no-access-control-allow-origin-error

Please note that the exact steps to configure CORS may vary depending on the specific services and tools you are using.

Can you share the link that you're following for QuickSight Developer Portal 5?

Answer

You can't use the generateEmbedUrlForRegisteredUser function on the client side, you need to do it on the server side.

CORS error when hitting generateEmbedUrlForRegisteredUser API through AWS Quicksight SDK

관련 콘텐츠