1

私は現在UI5 チュートリアルに従っており、ステップ 27で立ち往生しています: モック サーバー構成。

問題はrootUriモックサーバーの構成です。チュートリアルに従ってNorthwind OData サービスをdataSource使用しており、.manifest.json

ここで、オンライン サービスの代わりにローカルのモック データを使用するために、チュートリアルで説明されているように必要なファイルを作成しました。次に を実行するmockServer.htmlと、サーバーはサービス リクエストをローカルのモック データにリダイレクトせず、代わりにリクエストを作成し、Web セキュリティの問題が原因で失敗します。

以下を使用するrootUriと、モック サーバーはリダイレクトされず、サービス リクエストは失敗します。

// 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 の読み込みに失敗しました: プリフライト要求への応答がアクセス制御チェックに合格しません: No 'Access-Control-Allow-要求されたリソースに Origin' ヘッダーが存在します。したがって、オリジン「https://webidetesting9515320-s0015250556trial.dispatcher.hanatrial.ondemand.com」へのアクセスは許可されていません。応答の HTTP ステータス コードは 501 でした。

Stackoverflow に関する別の質問では、「ワイルドカード」ルート uri を使用するモック サーバーが示されていますが、これも失敗します。

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

モック サーバー構成を機能させる唯一の方法はrootUri、manifest.json に記述されているものとまったく同じ URL を、モックしたい dataSource の URI として使用することです。

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

上記のコードは機能しますが、Web IDE はこれは悪い習慣であると述べています。

エラー: Fiori アーキテクチャ ガイドライン: ESLint(sap-no-hardcoded-url): ハードコードされた (非相対) URL が見つかりました。(画像)

私の質問は次のとおりです。相対で意図した方法でモックサーバーを実行するにはどうすればよいrootUriですか?

webapp/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"
        }
      }
    }
  },
...

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>
4

2 に答える 2