到目前为止，我们已经使用了本地JSON数据，但是现在我们将访问一个真正的OData服务来可视化远程数据。
用可公开获得的Northwind OData服务显示并替换发票模型的JSONModel类型，以可视化远程数据。您将会惊讶地发现，要实现这一点，几乎不需要做什么更改!
请注意：这一步是可选的。如果无法使其工作，不要太担心，其余步骤也将处理到目前为止使用的本地JSON数据。
Preview
Products from the OData invoices test service are now shown within our app
Coding
You can view and download all files at Walkthrough - Step 26.
webapp/manifest.json
{
"_version": "1.12.0",
"sap.app": {
...
"ach": "CA-UI5-DOC",
"dataSources":{
"invoiceRemote":{
"uri":"https://services.odata.org/V2/Northwind/Northwind.svc/",
"type":"OData",
"settings":{
"odataVersion":"2.0"
}
}
}
},
"sap.ui": {
...
},
"sap.ui5": {
...
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "sap.ui.demo.walkthrough.i18n.i18n"
}
},
"invoice": {
"dataSource":"invoiceRemote"
}
}
}
}
在描述符文件的sap.app部分，我们添加了一个数据源配置。使用invoiceRemote键，我们指定一个允许自动模型实例化的配置对象。我们指定服务(OData)的类型和模型版本(2.0)。在此步骤中，我们希望使用位于https://services.odata.org/V2/Northwind/Northwind.svc/的可公开获取的Northwind OData服务。因此，URI指向官方的Northwind OData服务。
在models部分，我们替换发票模型的内容。当模型在组件初始化期间自动实例化时，此键仍然用作模型名。但是，数据源键的invoiceRemote值是对上面指定的数据源部分的引用。该配置允许组件在应用程序启动期间检索该模型的技术信息。
我们的组件现在自动创建sa .ui.model.odata.v2的一个实例。根据我们在上面指定的设置，ODataModel，并使其作为名为invoice的模型可用。当您使用invoiceRemote数据源时，ODataModel从真正的Northwind OData服务获取数据。我们从Northwind OData服务收到的发票与我们之前使用的JSON数据具有相同的属性(除了status属性，该属性在Northwind OData服务中不可用)。
请注意：如果希望组件上有一个默认模型，可以将模型名称更改为描述符文件中的空字符串。自动实例化的模型可以通过调用它来检索。组件中的getModel。在基于组件的应用程序的控制器中，您可以调用这个. getview (). getmodel()来获得自动实例化的模型。要检索一个命名的模型，您必须将描述符文件中定义的模型名称传递给getModel，也就是说，在组件中您将调用this.getModel(“invoice”)来获得我们在描述符中定义的自动生成的发票模型。
你现在可以试着运行这个应用程序，看看会发生什么——我们会在控制台看到一个与我们的新配置相关的错误:
在谷歌Chrome中违反同源策略
由于所谓的同源策略，如果服务端点具有与应用程序不同的域/子域、协议或端口，浏览器将拒绝对服务端点的AJAX请求。出于安全原因，浏览器拒绝直接连接到远程URL。根据您的开发环境，您有不同的选择来克服这个限制:
▪SAP Web IDE: Configure a destination
▪Local Development: Configure a local proxy (CORS anywhere)
▪Workaround: Disabling the same-origin policy in the browser (not recommended, only for testing)
Parent topic: Walkthrough
Previous: Step 25: Sorting and Grouping
Next: Step 27: Mock Server Configuration
Related Information
Use a SimpleProxyServlet for Testing to Avoid Cross-domain Requests
API Reference: sap.ui.model.odata.v2.ODataModel
Request Fails Due to Same-Origin Policy (Cross-Origin Resource Sharing - CORS)