我目前正在关注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>
请检查教程中的第26步。有关访问远程OData服务的“注意”和“注意”部分。 –
本教程中的“注意”和“注意”框讨论了浏览器对CORS处理的影响。据我了解,我们创建模拟服务器的唯一目的是使用本地而不是远程数据 - 所以CORS不再是一个问题,“注意”和“注意”框不相关。我在这里错过了什么吗? –
请按照从“演练 - 步骤27”中下载的文件进行尝试。然后,该应用程序应完全按照下载模式运行。 –