Je suis actuellement le UI5 tutorial et je suis bloqué sur step 27: Configuration du serveur maquette. Le problème est la configuration du serveur fictif rootUri. J'utilise le Northwind OData service selon le tutoriel et ai configuré un dataSource pour Factures dans le manifest.json.UI5 Mock Server avec des données locales: "rootUri" ne fonctionne pas
Maintenant, pour utiliser les données de simulation locales au lieu du service en ligne, j'ai créé les fichiers nécessaires comme indiqué par le tutoriel. Lorsque j'exécute ensuite le mockServer.html, le serveur ne redirige pas la demande de service vers les données de simulation locales, mais effectue la demande et échoue en raison de problèmes de sécurité Web.
Si je le rootUri suivant, le serveur simulé ne redirige pas et la demande de service échoue:
// 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 montre le serveur simulé en utilisant une racine-uri « joker », mais échoue aussi:
// Snippet from mockserver.js
var oMockServer = new MockServer({
rootUri: "/"
});
la seule façon que je peux faire le travail de configuration du serveur est simulé à utiliser la même URL exacte que le rootUri que je s écrit dans le manifest.json comme l'URI de la source de données Je veux railler:
// Snippet from mockserver.js
var oMockServer = new MockServer({
rootUri: "https://services.odata.org/V2/Northwind/Northwind.svc/"
});
Le code ci-dessus fonctionne, mais le Web IDE indique que cela est une mauvaise pratique:
error: Fiori Architectural Guidelines: ESLint(sap-no-hardcoded-url): Hardcoded (non relative) URL found. (img)
Mon question est maintenant: Comment puis-je faire fonctionner le serveur fictif de la manière voulue avec un relatif rootUri?
webapp/manifest.json (extrait)
{
"_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
<!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
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>
Veuillez vérifier l'étape 26 dans le didacticiel. Il y a une section "Note" et "Attention" concernant l'accès au service OData distant. –
Les cases "Note" et "Attention" du tutoriel traitent des effets de la gestion CORS par le navigateur. Si je comprends bien, nous créons le mockserver dans le seul but d'utiliser des données locales au lieu de distantes - CORS n'est donc plus un problème et les cases "Note" et "Attention" ne sont pas pertinentes. Est-ce que j'ai râté quelque chose? –
S'il vous plaît essayez avec les fichiers exactement comme téléchargé de la "Walkthrough - Étape 27". Ensuite, l'application devrait fonctionner en mode simulé exactement comme téléchargé. –