UI5 Mock Server with Local Data: “rootUri” Not Working

Question

I\'m currently following the UI5 tutorial and am stuck on step 27: Mock Server Configuration.

The problem is the rootUri configuration of the mock server. I

Answer 1

Some details of chapter 27 of the tutorial are quite misleading.

1. The rootUri of the MockServer must match the uri parameter of the datasource in manifest.json.

2. Instead of changing datasource's uri to the (wrong) rootUri of MockServer given in the tutorial, you should actually change MockServer's rootUri to the URI of the external source. In webapp/localService/mockserver.js use this corrected block:

       var oMockServer = new MockServer({
           rootUri: "https://services.odata.org/V2/Northwind/Northwind.svc/"
       });
   

This will create a MockServer that intercepts all calls to that external URI and responds to them locally. And with this construct, it is actually possible to access the MockServer through /webapp/test/mockServer.html and the live data server through /webapp/index.html.

Hint:
You will most likely still have trouble accessing the original (external) data source using /webapp/index.html due to Same Origin Policy restrictions (SOP). With Google Chrome this can be nicely solved by running a second (!) instance of the browser without SOP. This is possible in parallel to other open browser windows of the standard instance WITH SOP, so you don't need to close all your open browser windows. See this answer for details.