title: UI5 Mock Server with Local Data: "rootUri" Not Working
body: <p>I'm currently following the <a href="https://sapui5.hana.ondemand.com/#/topic/3da5f4be63264db99f2e5b04c5e853db" rel="nofollow noreferrer">UI5 tutorial</a> and am stuck on <a href="https://openui5.hana.ondemand.com/#/topic/bae9d90d2e9c4206889368f04edab508" rel="nofollow noreferrer">step 27</a>: Mock Server Configuration.</p>
  
  <p>The problem is the <code>rootUri</code> configuration of the mock server. I am using the <a href="http://services.odata.org/V2/Northwind/Northwind.svc/$metadata" rel="nofollow noreferrer">Northwind OData service</a> as per tutorial and have configured a <code>dataSource</code> for <em>Invoices</em> in the <code>manifest.json</code>.</p>
  
  <p>Now, to use the local mock data instead of the online service, I created the necessary files as stated by the tutorial. When I then run the <code>mockServer.html</code>, the server doesn't redirect the service request to the local mock data, but instead makes the request and fails because of web security issues.</p>
  
  <p>If I use the following <code>rootUri</code>, the mock server doesn't redirect and the service request fails:</p>
  
  <pre><code>// Snippet from mockserver.js
  var oMockServer = new MockServer({
      rootUri: "/destinations/northwind/V2/Northwind/Northwind.svc/"
  });
  </code></pre>
  
  <blockquote>
    <p>Failed to load <a href="https://services.odata.org/V2/Northwind/Northwind.svc/" rel="nofollow noreferrer">https://services.odata.org/V2/Northwind/Northwind.svc/</a>$metadata?sap-language=DE:
          Response to preflight request doesn't pass access control check:
            No 'Access-Control-Allow-Origin' header is present on the requested resource.
            Origin '<a href="https://webidetesting9515320-s0015250556trial.dispatcher.hanatrial.ondemand.com" rel="nofollow noreferrer">https://webidetesting9515320-s0015250556trial.dispatcher.hanatrial.ondemand.com</a>' is therefore not allowed access.
            The response had HTTP status code 501.</p>
  </blockquote>
  
  <p><a href="https://stackoverflow.com/a/40988844/5846045">Another question on Stackoverflow</a> shows the mock server using a "wildcard" root-uri, but this also fails:</p>
  
  <pre><code>// Snippet from mockserver.js
  var oMockServer = new MockServer({
      rootUri: "/"
  });
  </code></pre>
  
  <p>The only way I can make the mock server configuration work is to use the exact same URL as the <code>rootUri</code> that is written in the manifest.json as the URI of the dataSource I want to mock:</p>
  
  <pre><code>// Snippet from mockserver.js
  var oMockServer = new MockServer({
      rootUri: "https://services.odata.org/V2/Northwind/Northwind.svc/"
  });
  </code></pre>
  
  <p>The above code works, but the Web IDE states that this is a bad practice:</p>
  
  <blockquote>
    <p>error: Fiori Architectural Guidelines: ESLint(sap-no-hardcoded-url): Hardcoded (non relative) URL found. (<a href="https://i.stack.imgur.com/DRL8q.png" rel="nofollow noreferrer">img</a>)</p>
  </blockquote>
  
  <p>My question now is: <strong>How can I make the mock server run the intended way with a relative <code>rootUri</code>?</strong></p>
  
  <hr>
  
  <p>webapp/manifest.json (excerpt)</p>
  
  <pre><code>{
    "_version": "1.1.0",
    "sap.app": {
      "_version": "1.1.0",
      "id": "sap.ui.tutorial.walkthrough",
      "type": "application",
      "i18n": "i18n/i18n.properties",
      "title": "{{appTitle}}",
      "description": "{{appDescription}}",
      "applicationVersion": {
        "version": "1.0.0"
      },
      "dataSources": {
        "invoiceRemote": {
          "uri": "https://services.odata.org/V2/Northwind/Northwind.svc/",
          "type": "OData",
          "settings": {
            "odataVersion": "2.0"
          }
        }
      }
    },
  ...
  </code></pre>
  
  <hr>
  
  <p>webapp/test/mockServer.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Hello World App - Test Page&lt;/title&gt;
          &lt;script src="/resources/sap-ui-core.js"
                  id="sap-ui-bootstrap"
                  data-sap-ui-theme="sap_belize"
                  data-sap-ui-libs="sap.m"
                  data-sap-ui-compatVersion="edge"
                  data-sap-ui-preload="async"
                  data-sap-ui-resourceroots='{
                      "sap.ui.tutorial.walkthrough": "../"
                  }'&gt;&lt;/script&gt;
  
          &lt;script type="text/javascript"&gt;
              sap.ui.getCore().attachInit(function() {
                  sap.ui.require([
                      "sap/ui/tutorial/walkthrough/localService/mockserver",
                      "sap/m/Shell",
                      "sap/ui/core/ComponentContainer"
                  ], function(mockserver, Shell, ComponentContainer) {
                      mockserver.init();
  
                      new Shell({
                          app: new ComponentContainer({
                              name: "sap.ui.tutorial.walkthrough",
                              height: "100%"
                          })
                      }).placeAt("content")
                  });
              });
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body class="sapUiBody" id="content"&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <p>webapp/localService/mockserver.js</p>
  
  <pre><code>sap.ui.define([
      "sap/ui/core/util/MockServer"
  ], function (MockServer) {
      "use strict";
  
      return {
          init: function () {
              // create
              var oMockServer = new MockServer({
                  rootUri: "https://services.odata.org/V2/Northwind/Northwind.svc/"
              });
              var oUriParameters = jQuery.sap.getUriParameters();
              // configure
              MockServer.config({
                  autoRespond: true,
                  autoRespondAfter: oUriParameters.get("serverDelay") || 1000
              });
              // simulate
              var sPath = jQuery.sap.getModulePath("sap.ui.tutorial.walkthrough.localService");
              oMockServer.simulate(sPath + "/metadata.xml", sPath + "/mockdata");
              // start
              oMockServer.start();
          }
      };
  });
  </code></pre>
  
  <hr>
  
  <p>webapp/localService/metadata.xml</p>
  
  <pre><code>&lt;edmx:Edmx Version="1.0" xmlns:edmx="http://schemas.microsoft.com/ado/2007/06/edmx"&gt;
      &lt;edmx:DataServices m:DataServiceVersion="1.0" m:MaxDataServiceVersion="3.0"
                         xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata"&gt;
          &lt;Schema Namespace="NorthwindModel" xmlns="http://schemas.microsoft.com/ado/2008/09/edm"&gt;
              &lt;EntityType Name="Invoice"&gt;
                  &lt;Key&gt;
                      &lt;PropertyRef Name="ProductName"/&gt;
                      &lt;PropertyRef Name="Quantity"/&gt;
                      &lt;PropertyRef Name="ShipperName"/&gt;
                  &lt;/Key&gt;
                  &lt;Property Name="ShipperName" Type="Edm.String" Nullable="false" MaxLength="40" FixedLength="false"
                            Unicode="true"/&gt;
                  &lt;Property Name="ProductName" Type="Edm.String" Nullable="false" MaxLength="40" FixedLength="false"
                            Unicode="true"/&gt;
                  &lt;Property Name="Quantity" Type="Edm.Int16" Nullable="false"/&gt;
                  &lt;Property Name="ExtendedPrice" Type="Edm.Decimal" Precision="19" Scale="4"/&gt;
              &lt;/EntityType&gt;
          &lt;/Schema&gt;
          &lt;Schema Namespace="ODataWebV2.Northwind.Model" xmlns="http://schemas.microsoft.com/ado/2008/09/edm"&gt;
              &lt;EntityContainer Name="NorthwindEntities" m:IsDefaultEntityContainer="true" p6:LazyLoadingEnabled="true"
                               xmlns:p6="http://schemas.microsoft.com/ado/2009/02/edm/annotation"&gt;
                  &lt;EntitySet Name="Invoices" EntityType="NorthwindModel.Invoice"/&gt;
              &lt;/EntityContainer&gt;
          &lt;/Schema&gt;
      &lt;/edmx:DataServices&gt;
  &lt;/edmx:Edmx&gt;
  </code></pre>