Getting Cors error in Angular UI application

I am trying to hit the daml json api (localhost:7575/v1/create) using an Angular frontend application, but I am getting a CORS error (check the below screenshot). I tried to setup the proxy config in angular and also passing the headers like below but it’s not working. Both applications are hosted on localhost.

Hi @arijitltim,

It’s been a while since I looked into CORS, but as I recall those headers have to be sent by the server as part of the response, putting them in the request made by the client won’t help.

CORS headers are part of the browser security model; in that model, each “origin” must be kept separate, and the origin includes the port, so having both your angular dev server and your JSON API running on localhost doesn’t help if they are served through different ports.

The easiest option here is probably to proxy the JSON API server so that the browser sees it as the same origin (same hostname, same port) as the rest of the application. I’m not very familiar with angular tooling, but it’s what we do in the getting started template with the server proxy. I think this is a “create-react-app” feature, but hopefully Angular has something similar.

Is there any way to enable cors in DAML just like we can do in any other backend application?

I’m not sure; I’ll try to find someone internally who knows the answer to that.

There does not seem to be specific CORS support in the JSON API. You’ll have to find support for proxying a server within your toolset. Perhaps this resource can be useful?

1 Like

This issue is solved using a proxy server in Angular.