Cors issue with Daml Hub

I am trying to access my ledger on Daml Hub using a React UI and a daml/react useQuery hook but I receive a CORS error.

Access to XMLHttpRequest at 'https://z5j8xs27k1s3edld.daml.app/v1/query' 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.

Using Postman I can access the ledger as expected.
How do I fix this CORS issue?

Hi @galiliyo ,

It seems like you’re running your UI on a local server. In order to call Daml Hub API endpoints from a browser, the UI must be hosted and running on its Daml Hub domain. The documentation explains how to package and upload your UI to Hub: https://hub.daml.com/docs/quickstart#app-ui

If you’re interested in testing your application in a local development environment, you should run the UI against a local Daml sandbox ledger

1 Like

So there is no option to deploy the UI outside of Daml Hub?

Correct: If your UI runs against Hub-hosted ledgers, and requires users to log in to Hub (in order to get ledger party JWT tokens), then the UI has to also be running on Hub

1 Like

but in that case the UI on the local server does have the token. So why shouldn’t that be enough?

It’s generally viewed as a security risk to allow exfiltration of tokens from one website to another.

MDN provides some technical background on why browsers enforce these kinds of restrictions: Cross-Origin Resource Sharing (CORS) - HTTP | MDN

Can’t we add specific domain to the ledgers to allow cross domain?

Access-Control-Allow-Origin

Apart from having a closed list of Allowed Origins, doesn’t the PKCE Authorization Flow mitigate the security risks associated with sharing JWTs and Authorization Codes?