SAP BTP CAP Service Integration Issue with SAPUI5 Application - 404 Not Found Error

Question

Hello Stack Overflow community,

I am currently facing an issue while trying to integrate a SAP BTP CAP (Cloud Application Programming Model) service into a SAPUI5 application running locally. The CAP service is an oData v4 service with xSuaa authentication.

When I access the endpoint of the CAP service directly from the browser, it prompts for SAP credentials, and upon successful login, it displays the data as expected. However, when I try to integrate the same service into my SAPUI5 application, I encounter a 404 Not Found error with the following message:

GET odata/v4/catalog/Books/$metadata - Could not load metadata: 404 Not Found sap.ui.model.odata.v4.lib._MetadataRequestor

I have attempted to add the necessary credentials in the custom middleware configuration part of the ui5.yaml file, but it does not seem to resolve the issue.

Here's a snippet of my ui5.yaml:

server:
  customMiddleware:
  - name: ui5-middleware-simpleproxy
    afterMiddleware: compression
    mountPath: /v4
    configuration:
      baseUri: <CAP service end point>
      username: <sap ac username>
      password: <sap ac password?

Despite these efforts, I am still unable to resolve the issue. Can anyone provide guidance on how to overcome this 404 Not Found error and successfully integrate the SAP BTP CAP service into my SAPUI5 application? Any help or insights would be greatly appreciated.

Thank you in advance!