具有本地数据的UI5模拟服务器:"rootUri"无法运作 [英] UI5 Mock Server with Local Data: "rootUri" Not Working
问题描述
我目前正在关注 UI5教程，并停留在步骤27 :模拟服务器配置.
I'm currently following the UI5 tutorial and am stuck on step 27: Mock Server Configuration.
问题是模拟服务器的rootUri配置.我正在按照教程使用 Northwind OData服务并进行了配置manifest.json中发票的dataSource.
The problem is the rootUri configuration of the mock server. I am using the Northwind OData service as per tutorial and have configured a dataSource for Invoices in the manifest.json.
现在，要使用本地模拟数据而不是在线服务，我创建了本教程所述的必要文件.然后，当我运行mockServer.html时，服务器不会将服务请求重定向到本地模拟数据，而是发出请求并由于Web安全问题而失败.
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 mockServer.html, 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.
如果我使用以下rootUri，则模拟服务器不会重定向并且服务请求失败:
If I use the following rootUri, the mock server doesn't redirect and the service request fails:
// Snippet from mockserver.js
var oMockServer = new MockServer({
rootUri: "/destinations/northwind/V2/Northwind/Northwind.svc/"
});
无法加载 https://services.odata.org/V2/Northwind /Northwind.svc/ $ metadata?sap-language = DE: 对预检请求的响应未通过访问控制检查: 所请求的资源上没有"Access-Control-Allow-Origin"标头. 来源' https://webidetesting9515320-s0015250556trial.dispatcher.hanatrial.ondemand.com '因此，不允许访问. 响应的HTTP状态代码为501.
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.
有关Stackoverflow的另一个问题显示了使用通配符" root-uri的模拟服务器，但这也失败了:
Another question on Stackoverflow shows the mock server using a "wildcard" root-uri, but this also fails:
// Snippet from mockserver.js
var oMockServer = new MockServer({
rootUri: "/"
});
我可以使模拟服务器配置工作的唯一方法是使用与manifest.json中写入的rootUri完全相同的URL作为我要模拟的数据源的URI:
The only way I can make the mock server configuration work is to use the exact same URL as the rootUri that is written in the manifest.json as the URI of the dataSource I want to mock:
// Snippet from mockserver.js
var oMockServer = new MockServer({
rootUri: "https://services.odata.org/V2/Northwind/Northwind.svc/"
});
上面的代码有效，但是Web IDE指出这是一种不好的做法:
The above code works, but the Web IDE states that this is a bad practice:
错误:Fiori建筑准则:ESLint(sap-no-hardcoded-url):找到了硬编码(非相对)URL. ( img )
我现在的问题是:如何使模拟服务器以相对的rootUri运行预期的方式?
My question now is: How can I make the mock server run the intended way with a relative rootUri?
webapp/manifest.json(摘录)
webapp/manifest.json (excerpt)
{
"_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"
}
}
}
},
...
webapp/test/mockServer.html
webapp/test/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>
webapp/localService/mockserver.js
webapp/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
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>
推荐答案
在为模拟服务器定义rootUri时，需要注意一些规则.
There are some rules to watch out for when it comes to defining the rootUri for mock server.
rootUri
- 应该是相对的
- 必须以斜杠(
"/") 结尾
- 必须与分配给您模型的URI匹配.
- Should be relative
- Has to end with a slash (
"/") - Has to match with the URI that is assigned to your model.
在步骤27 中提到:
(
rootUri)与描述符文件中我们数据源的URL匹配.
(The
rootUri) matches the URL of our data source in the descriptor file.
以及主题模拟服务器:常见问题:
根URI必须是相对的，并且需要结尾的'/'.它还需要匹配OData/JSON模型中设置的URI或简单的XHR调用，以便模拟服务器拦截它们.
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的定义就无关紧要.这就是为什么某些任意URI(如rootUri: "/")也可以工作，但仅在数据源中的uri相同的情况下的原因.
So it doesn't matter how your rootUri is defined as long as it fulfills those three requirements mentioned above. That's why some arbitrary URIs like rootUri: "/" works as well but only if the uri in the dataSource is the same.
在您的情况下，如下更改rootUri值应使模拟服务器运行:
In your case, changing the rootUri value like this below should make the mock server running:
var oMockServer = new MockServer({
rootUri: "/destinations/northwind/V2/Northwind/Northwind.svc/"
});
并分别在您的应用程序描述符(manifest.json)中..:
And in your app descriptor (manifest.json) respectively..:
"dataSources": {
"invoiceRemote": {
"uri": "/destinations/northwind/V2/Northwind/Northwind.svc/",
"type": "OData",
"settings": {
"odataVersion": "2.0"
}
}
}
要在非MockServer方案中使用该路径，您需要注册一个SAP Cloud Platform中的相应目标和编辑新应用. /a>在您的项目中.
无需更改应用程序代码.
To make the path work in a non-MockServer scenario, you'll need to register a corresponding destination in SAP Cloud Platform and edit neo-app.json in your project accordingly.
No need to change the application code.
这篇关于具有本地数据的UI5模拟服务器:"rootUri"无法运作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
