javascript - Widget模板的跨域加载

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 header ，例如:

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 .