How can I consume OData services from my own backend system for a UI5 app?

Question

I am new to SAP and currently working on the walkthrough tutorial of the SAPUI5 documentation and managed to get to Step 26 - Remote OData Service.

I also wanted to try this step with my own OData service from the backend system that I created for work. I simply replaced the OData service from the tutorial with the service URL of my own OData service plus I created a destination for the ABAP server.

The code in my manifest.json file:

"dataSources": {
  "mainService": {
    "uri": "server-url/sap/opu/odata/sap/ZDEMO_ODATA_PRACTICE_SRV",
    "type": "OData",
    "settings": {
      "odataVersion": "2.0",
      "localUri": "localService/metadata.xml"
    }
  }
}

"models": {
  "": {
    "dataSource": "mainService",
    "preload": true
  }
}

I wanted to display the data from the database in a simple list and created following view:

<mvc:View controllerName="dummyproject.dummyproject.controller.App"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  displayBlock="true">
  <!-- ... -->
  <List items="{/PersonSet}">
    <!-- ... -->
  </List>
  <!-- ... -->
</mvc:View>

The connection is working, but I get an empty list on my screen and the following error message:

[ODataMetadata] initial loading of metadata failed

I've already seen error guides that suggest that this error has something to do with same-origin policy but I thought I could resolve it with creating a destination.

I also checked the OData service itself in the SAP GUI and tested it with the SAP Gateway client, where it works without any problems.

Does anybody know how to deal with this error or maybe has a clue what I might have done wrong?

Answer 1

From the Gateway's point of view you can troubleshoot such issues with the Error Log and Payload Trace. However these are mostly useful when you see a failing request in the Network tab as well in the Chrome developer tools (you didn't mention if you do or not). Error Log:

1. Call /N/IWFND/ERROR_LOG in your Gateway system
2. In the menu, choose Error Log -> Global Config
3. Set the Log Level to Full
4. Save
5. Reproduce the error
6. Go back to the Error Log and check if your error is logged. If it's logged, select it and click Replay to Gateway Client, then let us know the method, URL, request headers and request body (if any) + the error response

Traces

1. Call /N/IWFND/TRACES in your Gateway system
2. Set the user to the one you'll use in the frontend to reproduce the issue (or to the technical user)
3. Set the trace level to Full
4. Check the Payload Trace checkbox
5. Reproduce the issue
6. Now here from SO it's hard to tell you what to do with that result because you should export the result and somehow send it to us - but basically you can examine the requests and the responses and also replay the request to Gateway Client to test there.

From the UI5 point of view Swadhin's answer is correct.

Answer 2

I am assuming you are using BAS / VSCode as your frontend IDE. If so, you can use ui5.yaml for you middleware to avoid CORS. E.g.:

specVersion: '2.4'
metadata:
  name: 'swadhin.demo.northwind.employee.readonly'
type: application
server:
  customMiddleware:
  - name: fiori-tools-proxy
    afterMiddleware: compression
    configuration:
      ignoreCertError: false # If set to true, certificate errors will be ignored. E.g. self-signed certificates will be accepted
      backend:
      - path: /V2
        url: https://services.odata.org
      ui5:
        path: 
        - /resources
        - /test-resources
        url: https://ui5.sap.com
        version:  # The UI5 version, for instance, 1.78.1. Empty means latest version
  - name: fiori-tools-appreload
    afterMiddleware: compression
    configuration:
     port: 35729
     path: webapp

In case you are using the old SAP Web IDE, you can use neo-app.json for reverse-proxy:

{
  "welcomeFile": "/webapp/test/flpSandbox.html",
  "routes": [
    {
      "path": "/sap/opu/odata",
      "target": {
        "type": "destination",
        "name": "DESTINATION",
        "entryPath": "/sap/opu/odata"
      },
      "description": "DESTINATION"
    }
  ]
}

Make sure to use the path in your UI5 application e.g. in manifest.json:

"uri": "/sap/opu/odata/sap/ZDEMO_ODATA_PRACTICE_SRV",