开发环境:eclipse Luna, sapui5 toolkit eclipse plugin(从sap官网下载)
运行环境:eclipse + Tomcat
OData环境:SAP在公网上提供的免费的基于NetWeaver Gateway的测试用OData服务
代码说明:
最开始测试
sServiceUrl = “http://sapes1.sapdevcenter.com:8080/SAP/OPU/ODATA/IWFND/RMTSAMPLEFLIGHT/“;
在Chrome浏览器发现,发现SAPUI5会请求一个OPTIONS(不是GET,POST)的HTTP请求,/SAP/OPU/ODATA/IWFND/RMTSAMPLEFLIGHT/$metadata
给sapes1.sapdevcenter.com:8080,但是没有把用户名口令放在Authentication的http header里面一并提交给sapes1.sapdevcenter.com:8080,sapes1.sapdevcenter.com:8080的回答是401 Not Authenticated。
sServiceUrl = “http://services.odata.org/V4/Northwind/Northwind.svc/“;
在Chrome浏览器发现,发现SAPUI5会请求一个OPTIONS(不是GET,POST)的HTTP请求,/V4/Northwind/Northwind.svc/$metadata
给services.odata.org, services.odata.org的回答是Not implemented。
好吧,两个错误的原因其实是一样的,在bing.com上搜索了下,https://scn.sap.com/thread/3367409 上解释说:”preflighted” requests first send an HTTP OPTIONS request header to the resource on the other domain, in order to determine whether the actual request is safe to send. Cross-site requests are preflighted like this since they may have implications to user data
解决办法:
用SAPUI5内置的proxy功能访问Cross-site跨网站的OData服务即可。
sServiceUrl = “proxy/http/sapes1.sapdevcenter.com:8080/SAP/OPU/ODATA/IWFND/RMTSAMPLEFLIGHT/”;
完整代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
// create the DataTable control
var oTable = new sap.m.Table("idRandomDataTable", {
headerToolbar : new sap.m.Toolbar({
content : [ new sap.m.Label({
text : "Summary Data"
}), new sap.m.ToolbarSpacer({}), new sap.m.Button("idPersonalizationButton", {
icon : "sap-icon://person-placeholder"
}) ]
}),
columns : [ new sap.m.Column({
width : "2em",
header : new sap.m.Label({
text : "From City"
})
}), new sap.m.Column({
width : "2em",
header : new sap.m.Label({
text : "To City"
})
}), new sap.m.Column({
width : "2em",
header : new sap.m.Label({
text : "出发时间"
})
}) ]
});
oTable.bindItems("/FlightCollection", new sap.m.ColumnListItem({
cells : [ new sap.m.Text({
text : "{flightDetails/cityFrom}"
}), new sap.m.Text({
text : "{flightDetails/cityTo}"
}), new sap.m.Text({
text : "{flightDetails/departureTime}",
}), ]
}));
//oTable.setModel(new sap.ui.model.json.JSONModel(summaryDetailData));
getJSON(oTable);
oTable.placeAt("content");
function getJSON(oTable) {
//var sServiceUrl = "http://sapes1.sapdevcenter.com:8080/SAP/OPU/ODATA/IWFND/RMTSAMPLEFLIGHT/FlightCollection/";
var sServiceUrl = "proxy/http/sapes1.sapdevcenter.com:8080/SAP/OPU/ODATA/IWFND/RMTSAMPLEFLIGHT/";
oTable.setModel(new sap.ui.model.odata.ODataModel(sServiceUrl, true, "myusername", "mypassword"));
//var sServiceUrl = "http://services.odata.org/V4/Northwind/Northwind.svc/Customers/";
//var sServiceUrl = "proxy/http/services.odata.org/V4/Northwind/Northwind.svc/";
oTable.setModel(new sap.ui.model.odata.ODataModel(sServiceUrl));
}
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
运行结果: