Request to load embedded viz returns CORS error "URL has been blocked by CORS policy" on Tableau Cloud

Issue

Tableau Embedded views can result in the following error:

Access to fetch at 'https://pod.online.tableau.com/vizportal/api/web/v1/auth/embed/signin' from origin 'URL' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Environment

Tableau Cloud

Resolution

Update the Embedding API library URL in the website/application to include the pod where the Tableau Cloud site is hosted.

For example, instead of using:

<script type="module" src="https://online.tableau.com/javascripts/api/tableau.embedding.3.latest.min.js"></script>

use:

<script type="module" src="https://10az.online.tableau.com/javascripts/api/tableau.embedding.3.latest.min.js"></script>

Your pod is shown in the first portion of the site URL after signing in.
Example: https://10az.online.tableau.com is the United States - West (10AZ) pod.

Cause

Different versions of code on the Tableau Cloud pod where a site is hosted and the version of the Embedding API library available at the embedding URL used for the source may result in the CORS error being returned.