2017-10-10 30 views
1

我目前正在关注UI5 tutorial,并卡在step 27:模拟服务器配置。UI5模拟服务器与本地数据:“rootUri”不工作

问题是模拟服务器的rootUri配置。我按照教程使用Northwind OData service,并在manifest.json中为发票配置了dataSource

现在,为了使用本地模拟数据而不是在线服务,我创建了本教程所述的必需文件。然后,当我运行mockServer.html时,服务器不会将服务请求重定向到本地模拟数据,而是由于Web安全问题而发出请求并失败。

如果我用下面rootUri,模拟服务器不重定向和服务请求失败:

// Snippet from mockserver.js 
var oMockServer = new MockServer({ 
    rootUri: "/destinations/northwind/V2/Northwind/Northwind.svc/" 
}); 

Failed to load https://services.odata.org/V2/Northwind/Northwind.svc/ $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 ' https://webidetesting9515320-s0015250556trial.dispatcher.hanatrial.ondemand.com ' is therefore not allowed access. The response had HTTP status code 501.

Another question on Stackoverflow显示了使用“通配符”根URI,但这种模拟服务器也失败:

// Snippet from mockserver.js 
var oMockServer = new MockServer({ 
    rootUri: "/" 
}); 

我可以模拟服务器配置的唯一途径是使用相同的URL作为rootUri我书面的manifest.json中作为数据源的URI我想嘲笑:

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

上面的代码工作,但Web IDE指出,这是一个不好的做法:

error: Fiori Architectural Guidelines: ESLint(sap-no-hardcoded-url): Hardcoded (non relative) URL found. (img)

我现在的问题是:如何使模拟服务器以相对的方式运行预期的方式rootUri


web应用/的manifest.json(节选)

{ 
    "_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" 
     } 
     } 
    } 
    }, 
... 

web应用/测试/ mockServer.html

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta charset="utf-8"> 
     <title>Hello World App - Test Page</title> 
     <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": "../" 
       }'></script> 

     <script type="text/javascript"> 
      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") 
       }); 
      }); 
     </script> 
    </head> 
    <body class="sapUiBody" id="content"> 
    </body> 
</html> 

web应用/ LOCALSERVICE/mockserver.js

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(); 
     } 
    }; 
}); 

的webapp/LOCALSERVICE/metadata.xml中

<edmx:Edmx Version="1.0" xmlns:edmx="http://schemas.microsoft.com/ado/2007/06/edmx"> 
    <edmx:DataServices m:DataServiceVersion="1.0" m:MaxDataServiceVersion="3.0" 
         xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata"> 
     <Schema Namespace="NorthwindModel" xmlns="http://schemas.microsoft.com/ado/2008/09/edm"> 
      <EntityType Name="Invoice"> 
       <Key> 
        <PropertyRef Name="ProductName"/> 
        <PropertyRef Name="Quantity"/> 
        <PropertyRef Name="ShipperName"/> 
       </Key> 
       <Property Name="ShipperName" Type="Edm.String" Nullable="false" MaxLength="40" FixedLength="false" 
          Unicode="true"/> 
       <Property Name="ProductName" Type="Edm.String" Nullable="false" MaxLength="40" FixedLength="false" 
          Unicode="true"/> 
       <Property Name="Quantity" Type="Edm.Int16" Nullable="false"/> 
       <Property Name="ExtendedPrice" Type="Edm.Decimal" Precision="19" Scale="4"/> 
      </EntityType> 
     </Schema> 
     <Schema Namespace="ODataWebV2.Northwind.Model" xmlns="http://schemas.microsoft.com/ado/2008/09/edm"> 
      <EntityContainer Name="NorthwindEntities" m:IsDefaultEntityContainer="true" p6:LazyLoadingEnabled="true" 
          xmlns:p6="http://schemas.microsoft.com/ado/2009/02/edm/annotation"> 
       <EntitySet Name="Invoices" EntityType="NorthwindModel.Invoice"/> 
      </EntityContainer> 
     </Schema> 
    </edmx:DataServices> 
</edmx:Edmx> 
+0

请检查教程中的第26步。有关访问远程OData服务的“注意”和“注意”部分。 –

+0

本教程中的“注意”和“注意”框讨论了浏览器对CORS处理的影响。据我了解,我们创建模拟服务器的唯一目的是使用本地而不是远程数据 - 所以CORS不再是一个问题,“注意”和“注意”框不相关。我在这里错过了什么吗? –

+0

请按照从“演练 - 步骤27”中下载的文件进行尝试。然后,该应用程序应完全按照下载模式运行。 –

回答

1

有一些规则需要注意的,当涉及到定义为rootUri模拟服务器。

rootUri

  • 应该是相对
  • 有以斜线("/"
  • 必须匹配分配给模型中的URI结束。

    The root URI has to be relative and requires a trailing '/'. It also needs to match the URI set in OData/JSON models or simple XHR calls in order for the mock server to intercept them.


    所以不要紧,你rootUri是如何定义为:主题Mock Server: Frequently Asked Questions

    (The rootUri) matches the URL of our data source in the descriptor file.

    除了:

它在step 27提到只要它符合上述三项要求即可。这就是为什么像rootUri: "/"这样的一些任意URI可以正常工作,但只有在数据源中的uri相同时才有效。

在你的情况,改变rootUri值这样的下面应该使模拟服务器上运行:

var oMockServer = new MockServer({ 
    rootUri: "/destinations/northwind/V2/Northwind/Northwind.svc/" 
}); 

分别在您的应用程序描述符..:

"dataSources": { 
    "invoiceRemote": { 
    "uri": "/destinations/northwind/V2/Northwind/Northwind.svc/", 
    "type": "OData", 
    "settings": { 
     "odataVersion": "2.0" 
    } 
    } 
} 
+0

对不起,我没有找到时间来检查你的答案,直到现在。所以基本上,这使得模拟服务器按预期工作,并且我会将您的答案标记为已接受。 **但是,非模拟服务器版本现在无法运行。 '加载资源失败:服务器响应状态为404(未找到)“/destinations/northwind/V2/Northwind/Northwind.svc/”' 我知道,这可能与服务不是在服务器上注册。但是我会非常感兴趣的是,在服务器之外的真实和现有服务的“真实生活”条件下看到模拟服务器正常工作。 –

+0

@DanielKneip嗨,没问题。感谢您接受我的回答。 404的原因是因为路径是未知的。要使路径在非模拟服务器场景中运行,您必须在SAP Cloud Platform中注册相应的[目标](https://ui5.sap.com/#/topic/3a16c7a2f1e944deb000db49e5ece6be)并编辑[neo-app.json ](https://help.sap.com/viewer/65de2977205c403bbc107264b8eccf4b/Cloud/en-US/aed1ffa3f3e741b3a4573c9e475aa2a4.html)相应**或**你用'https://cors-anywhere.herokuapp替换路径.com/services.odata.org/V2/Northwind/Northwind.svc /'无处不在。 – boghyon

+0

@DanielKneip关于第一种方法[上面提到](https://stackoverflow.com/questions/46664672/ui5-mock-server-with-local-data-rooturi-not-working/47181847#comment82587427_47181847);本主题还介绍了如何编辑neo-app.json:https://ui5.sap.com/#/topic/672301f4f47640a8b2bc817d2ce0f512.html – boghyon

0

第27章的一些细节的教程是相当误导。

  1. 的MockServer rootUri必须匹配的manifest.json数据源的uri参数。

  2. 除了将数据源的URI更改为本教程中给出的MockServer的(错误)rootUri之外,实际上应该将MockServer的rootUri更改为外部源的URI。在webapp/localService/mockserver.js使用这个修正块:

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

这将创建一个截取到外部URI的所有呼叫和本地响应他们MockServer。通过这种构造,实际上可以通过/webapp/test/mockServer.html访问MockServer,并通过/webapp/index.html访问实时数据服务器。

提示:
您将最有可能还是无法访问原来的(外部)数据使用/webapp/index.html源由于同源策略的限制(SOP)。使用谷歌浏览器,通过在没有SOP的情况下运行浏览器的第二个(!)实例,可以很好地解决这个问题。这可以与标准实例WITH SOP的其他打开的浏览器窗口并行进行,因此您无需关闭所有打开的浏览器窗口。详情请参阅this answer

+0

我在教程步骤中看不到任何错误。演练只是假定该项目建立在Web IDE/SCP上,您可以在其中[定义目的地](https://stackoverflow.com/questions/46664672/ui5-mock-server-with-local-data-rooturi-not - 工作/ 47181847#comment82587427_47181847)。问题作者还提到他使用Web IDE。因此,在这种情况下,即使不启动模拟服务器,URI'/ destinations/northwind/V2/Northwind/Northwind.svc /'也是完全有效的。无需绕过SOP。 – boghyon

+0

@boghyon:如果我错了,请纠正我。我自己跟着演练,被困在同一章节。本教程中的任何地方都不会解释注册目的地。第27章声称,对于给定的更改,mockserver和liveserver可以通过使用两个不同的条目URL来使用。目的地没有被定义/登记在任何地方。 – Jpsy

+0

Walkthrough本身并没有多说关于注册目的地的说法是正确的,但是,自[同一步](https://ui5.sap.com/#/topic/bae9d90d2e9c4206889368f04edab508)提及之后出现错误是不正确的“URI指向我们为SAP Web IDE配置的目的地(参见上一步),我们假设这个目的地可用。”之前的步骤包含指向[this]的链接(https://ui5.sap.com/#/topic/5bb388fc289d44dca886c8fa25da466e),指向[this](https://ui5.sap.com/#/topic/3a16c7a2f1e944deb000db49e5ece6be )additaionally。这是所有 – boghyon

相关问题