Question

我在另一个域上托管一个小部件，而不是我嵌入小部件的网站。

dashboard.js加载正常，但HTML模板得到，

XMLHttpRequest cannot load http://192.168.2.72:8081/widgets/templates/dashboard.html. Origin http://192.168.2.72:8080 is not allowed by Access-Control-Allow-Origin.

模板的url是正确的，所以我只能假设这是一个跨域错误。在窗口小部件中，模板称为：

templatePath: dojo.moduleUrl("monitor/dashboard", "../templates/dashboard.html"),

当它是本地小部件时，这一切都有效。反正有没有让dojo以更好的方式加载HTML模板？

我定义加载器的方式，

<script data-dojo-config="async: 0, dojoBlankHtmlUrl: '/blank.html', parseOnLoad:true,
             packages: [
                   {name: 'monitor', location: 'http://192.168.2.72:8081' + '/widgets'},
             ]"
             src="/media/scripts/dojo/dojo/dojo.js"></script>

Answer 1

嗯，有几种方法可以解决它。

第一个解决方案是使用CORS（跨源资源共享）的服务器端解决方案。如果您可以设置CORS标题，如：

Access-Control-Allow-Origin: *

您的浏览器会检测到这一点并允许XMLHttpRequest。

虽然这个解决方案可能是最好的，但您也可以使用一些替代方案，例如使用JSONP（例如使用dojo/request/script）。但是，使用JSONP还意味着您不能使用纯HTML模板，但必须将HTML模板转换为JavaScript字符串。

如果您随后使用templateString属性，则可以将模板作为字符串传递，而不是指定路径。

templateString属性还允许您构建模板，如果您可以将模板构建为JavaScript字符串，那么您可以构建模板，例如使用Grunt和grunt-html-convert任务。

您可以使用depsScan对Dojo构建系统执行类似的操作。此构建转换应扫描模块并将遗留代码转换为AMD，并且还应查找dojo.cache()，dojo.moduleUrl()和templatePath等内容并将其转换为templateString。

查看documentation了解更多信息。

最后一个（也是很常见的）解决方案是使用反向代理。如果必须在不同的域上托管HTML模板，您仍然可以在HTTP服务器中定义反向代理，并将某些调用重定向到其他域，例如（Apache 2）：

ProxyPass           /templates  http://other-domain.com
ProxyPassReverse    /templates  http://other-domain.com

这样您就可以转到/templates/my-template.html，http://other-domain.com/my-template.html将重定向到{{1}}。

小部件模板的跨域加载

1 个答案: