Local approuter gives cors error while using a deployed service

[banjade]

Hello

I am trying to access the service of a CAP application from another CAP application both the applications are deployed. 

Current Environment is local, I have bounded the local approuter to the service which I need to use, when using directly via browser the API works. But when the UI application tries to call any API, it gives CORS issue.

Tried using extensions to disable/enable CORS but still no luck.

Directory structure for UI

xs-app.json for router

we have CORS middleware in service layer as well

When the manifest is being loaded gives cors

[gregorw]

Does your UI app try to call the CAP backend URL directly or do you use the routes of the approuter?

[Dinu]

The picture of the error (last one) is from browser, is it not? So, is it not the browser access that is failing with CORS error? What is the URL of this blocked request? It is not the approuter URL, is it?

[banjade]

@gregorw My UI is calling the approuter URL which is supposed to call the actual destination.

[banjade]

@Dinu. Yes the last picture is from browser. the UI is trying to call the metadata of the destination via approuter url. Which gives CORS error, but when the same link is being used directly on browser it works.

[Dinu]

CORS errors occur when the app in the browser embeds URLs from other domains. So it is not surprising that the URL ($metadata) does not fail when accessed directly. Is this prefix of this URL ($metadata) same that of the application that fails?

[banjade]

@Dinu The url which gives the error is localhost:5000/{serviceRoute} the one that calls is localhost:4004

[banjade]

@Dinu the localhost:5000 is the url to the local approuter. which I am using to redirect to the deployed link of the CAP service. Even after using approuter I am getting the CORS issue

[Dinu]

This is the issue:

"The url which gives the error is localhost:5000/{serviceRoute} the one that calls is localhost:4004"

Change your UI application to only make requests the same origin as it is served from. Let approuter which serves it route the requests to the correct url/destination. 

[banjade]

when I try to make request to port 4004 where the main application is running the service request give 404. in approuter I am calling the correct destination which is a deployed service on BTP

"autoService": {

"uri": "http://localhost:5000/v2/odata/v4/automation/",

"type": "OData",

"settings": {

"annotations": [],

"odataVersion": "2.0"

}

}

this is what datasource looks like in manifest

[Dinu]

You should not add hostname in the uri property of data source. Typical CAP (development) server setup only allows for requests to one (the same) CAP application. If you want to connect to two CAP application you need to access the application using a reverse proxy that will route the requests correctly; either use approuter or use backend proxy in Fiori/UI5 tools.