在Dundas BI中使用跨域资源共享
1.概述
本文解释了如何在Dundas BI中启用和使用跨域资源共享(Cross-Origin Resource Sharing, CORS)。这允许您的web应用程序通过JavaScript与Dundas BI的REST API或与其嵌入的iframe进行通信，即使您的应用程序和Dundas BI托管在不同的域上。
2.配置
跨域资源共享必须在Dundas BI中配置，以启用以下两种类型的通信，从您自己的客户端应用程序与Dundas BI:
- 如果您的应用程序和Dundas BI的url具有不同的域或源，则启用浏览器中应用程序的JavaScript通过其REST API与Dundas BI服务器通信。
- 用于JavaScript与页面中嵌入在iframe中的Dundas BI客户端应用程序或使用嵌入库进行通信，即使两个应用程序具有相同的域/源。
登录时的成员邓达斯BI的系统管理员组，打开管理从左边的主菜单中选择Dundas BI。
单击展开设置并选择配置编辑配置设置．
找到设置CORS(跨域)起源在Web应用程序类别。(如果需要，选择显示高级设置的选项。)
编辑此设置以输入URL起源(s)．这让Dundas BI知道您指定的源/域是您的，并且被授权从浏览器进行REST API调用或与Dundas BI嵌入式iframe进行通信。
任何没有列出或包含不同来源的站点都将被浏览器阻止访问Dundas BI REST API，并且不能向嵌入式Dundas BI应用程序传递任何消息。除非嵌入应用程序的来源被列出或包括，即使与登打士BI相同，否则不会像下面的例子那样执行来自已发布消息的脚本。
单击对话框底部的提交按钮以保存更改。
3.跨源脚本示例
下面是一个跨源资源共享的例子，其中你自己的应用程序的JavaScript传递JavaScript到Dundas BI的客户端应用程序中运行，该应用程序嵌入到你的浏览器中。
对于本文中在页面中嵌入Dundas BI的示例，它是使用内联框架(iframe)．你也可以使用Dundas BI嵌入式库并使用它的runScript方法。参见Dundas BI查看器集成示例．
3.1.创建一个新的仪表板
在一个新的仪表板上，添加一个图表(脚本名称为char1)和一个标签(脚本名称为label1)。
在本例中，我们将修改标签中的文本并取消对图表的隐藏。这将通过从主机站点发送一个脚本到包含Dundas BI的iframe来完成。
选择图表的Hidden属性，该属性位于属性窗口布局选项卡。
在仪表板的属性中，复制仪表板ID主要选项卡。
现在签入仪表板，并将其用作嵌入Dundas BI的web应用程序中的文件ID。
3.2.添加CORS JavaScript
可以将下面的JavaScript添加到应用程序/页面中，它调用postMessage．这个特殊的例子假设页面中包含了一个jQuery库引用:
美元(文档)。ready(function(){//同步示例var element = $("iframe").get(0);美元(元素)。load(function(){//由于iframe将在仪表板加载之前加载，//我们需要传入一个在仪表板准备好时运行的函数。element.contentWindow。postMessage({ "isAsync": false, "script": "\n\ window.dundas.context.ready(function () {\n\ var myView = dundas.context.baseViewService.currentView;\n\ var myLabel = myView.getAdapters().filter(function(a) { return a.name == \"label1\" })[0];\n\ var myChart = myView.getAdapters().filter(function(a) { return a.name == \"chart1\" })[0];\n\ myChart.hidden = false;\n\ myLabel.labelText = \"There it is!!!\";\n\ });\n\ " }, "https://dundas.mysite.com"); }); });
发送到嵌入式Dundas客户机应用程序的脚本等待仪表板加载，然后查找并修改图表和标签的属性。
\n\需要在字符串中包含换行符。
3.3.检测样本
构建并发布项目的服务器端更改(如果适用)。
现在您应该看到新的标签文本，并且图表应该是可见的。
4.其他CORS JavaScript示例
4.1.更改视图选项并返回数据
下面是在您自己的应用程序的JavaScript中在嵌入式Dundas客户端应用程序中运行JavaScript的另一个示例。它设置了视图选项的指示板来隐藏菜单、工具栏和任务栏，然后将消息发送回父应用程序。
$(document).ready(function(){//连接接收窗口的postMessage调用。美元(窗口)。bind("message"， function (e) {var result = e.o aralevent .data;//结果将为' hi '});//同步示例var iframe = $("# iframe ").get(0);$(iframe).load(function() {iframe. contentwindow。postMessage({ "isAsync": false, "script": " console.log(e); window.dundas.context.baseViewService.viewOptions = dundas.ViewOptions.VIEW_ONLY; window.dundas.context.updateViewFromViewOptions(); return 'hi'; " }, "https://dundas.mysite.com"); }); });
4.2.更改视图选项并异步返回数据
下面的示例与前面的示例相同，但将消息异步发送回父应用程序(出于演示目的，当超时过期时)。的isAsync属性在发布的消息对象中设置为true，在这种情况下，附带的脚本应该返回jQuery的承诺或递延如下所示:
$(document).ready(function(){//连接接收窗口的postMessage调用。美元(窗口)。bind("message"， function (e) {var result = e.o aralevent .data;//结果将为' hi '});//异步示例var iframe = $("# iframe ").get(0);$(iframe).load(function() {iframe. contentwindow。postMessage({ "isAsync": true, "script": " console.log(e); window.dundas.context.baseViewService.viewOptions = dundas.ViewOptions.VIEW_ONLY; window.dundas.context.updateViewFromViewOptions(); var result = new $.Deferred(); window.setTimeout(function() { result.resolve('hi') }, 500); return result.promise(); " }, "https://dundas.mysite.com"); }); // Note that ‘e’ is the original message's event, so you can also use e.source.postMessage(..) // to send a message back in addition to returning a value. });
5.REST API示例
下面的示例发送一个仪表板/从您自己的应用程序的JavaScript请求到Dundas BI服务器。在这种情况下，页面上可能没有任何嵌入式Dundas BI应用程序。
$(document).ready(function() {// REST API示例var def = $.ajax("https://dundas.mysite.com/api/dashboard/[dashboardId]"， {headers: {"Authorization": "Bearer " + sessionId}});Def.done (function (dashboard){//在这里执行操作。}）;//注意这个方法返回一个普通对象，而不是一个完整的Dundas类实例});
6.故障排除
使用浏览器的开发人员工具，检查控制台是否有错误。
如果你在上面的例子中发布消息或使用嵌入库来运行脚本:
- 如果一切顺利，在控制台中您应该看到正在运行的窗口消息从来源'[domain]'收到，它在可接受列表中。如果没有预料到，这可能是XSS攻击。如果您看到以下内容，则您输入的CORS应用程序配置设置可能有问题:尝试从源'[domain]'发送消息，但这不在配置允许的列表中。文章忽略。
的登打士BI产品说明包含一些关于嵌入的一般注意事项。