odata/api page with cross-origin requests

andreasnilsson

Hi,
I´ve been trying now for a while to create a react application and run it inside a page on NAV as a control add-in. I´m running version 2018 on a docker instance on my local machine and the control add in itself works fine.

I´m able to pass data to the control add in with AL code, and i´m able to invoke AL functions from the SPA.

However, i really think this is a terrible idea to supply the react app with data using AL when there is a much better alternative with odata available. Using an api I can develop the react app outside NAV with HMR and every other developer friendly functions that for instance create-react-app supplies. And it is much more testable as well.

The problem with this approach is that i can work with a NAV odata endpoint from my react app running on localhost by using the webpack proxy function:
https://webpack.js.org/configuration/dev-server/

Works like a charm! But when i deploy my nav extension to NAV i cannot make calls to the odata api because the odata endpoint doesnt allow cross origin calls.
It is cross origin because nav (i´m only using the web version) is running on port 80, but the odata api is running on port 7048

Anyone has any ideas on how to proceed?

andreasnilsson

I´m a web developer, not a NAV developer and i got some things mixed up!

The odata endpoint is not the same as a api page. An api page is a new feture on 2018, and this type of page allows cors calls it seems like.

So the answer to my original question is: use an api page instead of odata endpoint and it´ll work.
https://docs.microsoft.com/en-us/dynamics-nav/endpoints-apis-for-dynamics

Juhl

Allow it in the header of your rest calls.
That usually works.

andreasnilsson

I´m a web developer, not a NAV developer and i got some things mixed up!

The odata endpoint is not the same as a api page. An api page is a new feture on 2018, and this type of page allows cors calls it seems like.

So the answer to my original question is: use an api page instead of odata endpoint and it´ll work.
https://docs.microsoft.com/en-us/dynamics-nav/endpoints-apis-for-dynamics

kriki

[Topic moved from 'General Chat' forum to 'NAV Three Tier' forum]

etalon

andreasnilsson wrote: »

I´m a web developer, not a NAV developer and i got some things mixed up!

The odata endpoint is not the same as a api page. An api page is a new feture on 2018, and this type of page allows cors calls it seems like.

So the answer to my original question is: use an api page instead of odata endpoint and it´ll work.
https://docs.microsoft.com/en-us/dynamics-nav/endpoints-apis-for-dynamics

I tested this today with a BC19. This didn't work for me. An Api-Page ist exposed also unter an address which is directed to the OData-Port. And the OData-Port doesn't allow CORS. I didn't find anything to enable CORS in an OnPrem-BC. When we use a Cloud-BC (https://api.businesscentral.com....) CORS is allowed.

URL-Example OnPrem-BC with API-Page:
http://navdevbc19:7048/BC190/api/xy/Connection/v1.0/salesInvoices(f92bf06c-fcab-ec11-bb8f-000d3a39a433)

Does anyone have more informations on this?

etalon

Juhl wrote: »

Allow it in the header of your rest calls.
That usually works.

Could you explain this a bit more detailed? Which header do you want to modify? And what attribute should be set?

etalon

Finally we managed to solve this issue. We are now able to communicate with BC on Prem. It was a configuration error in our app registration. So first you have to check your requests with postman and solve these errors.

In the app registration under "Expose an API" we had to add a scope "default". Also we had to add this scope under "API Permissions". In BC we had to "grant access" under "Azure Active Directory Applications". In your request you have to set the scope to "api://YOURAPPID/"

The solution was to first make it work with postman. If you try it directly from your application you will get errors which will lead you to wrong assumptions.

Hope this helps anyone.