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

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

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?

Hi,
I have this issue quite a while. So it means there is no way I can host my UI on our server and call damlhub ledger api?

Or is there any way I can integrate a ledger app in our existing website?

Thanks