如何让 ng-include 指令与内容交付网络一起使用？

Posted 2023-03-06

【中文标题】如何让 ng-include 指令与内容交付网络一起使用？

【英文标题】：how do I get ng-include directive to work with a Content Delivery Network?

【发布时间】：2013-11-28 10:30:29

【问题描述】：

是否可以让 ng-include 指令与 CDN 一起使用？

在这种情况下：

<div ng-include='http://cdn.somewebsite.com/templates/home.tpl.html'></div>

somewebsite.com 的 cdn 子域通过 DNS/CName 映射到内容分发网络。

但是，当加载主站点 somewebsite.com 时，它不会呈现模板。我猜它在内部将其视为跨域调用。

是否有任何变通方法可以让 Angular 模板托管在第三方 CDN 上并使用本地域？

【参考方案1】：

是的，你是对的 - 问题在于跨域调用。 官方文档说：

默认情况下，模板 URL 被限制为与应用程序文档相同的域和协议。这是通过在其上调用 $sce.getTrustedResourceUrl 来完成的。要从其他域或协议加载模板，您可以将它们列入白名单或将它们包装为可信值。请参阅 Angular 的严格上下文转义。

和

请注意：除此之外，浏览器的同源策略和跨域资源共享 (CORS) 策略也适用，并可能进一步限制模板是否成功加载。这意味着如果没有正确的 CORS 策略，从不同域加载模板将无法在所有浏览器上运行。

例子：

angular.module('myApp', []).config(function($sceDelegateProvider) 
  $sceDelegateProvider.resourceUrlWhitelist([
    // Allow same origin resource loads.
    'self',
    // Allow loading from outer templates domain.
    'http://cdn.somewebsite.com/templates/**'
  ]); 
);

有用的链接：

ngInclude $sce

因此，您的问题可以通过适当的角度设置来解决，但不适用于所有浏览器。

【讨论】：

“但不适用于所有浏览器”（包括 chrome）——这很严重

【参考方案2】：

也许您可以稍微修改一下这段代码。我在数据库中有我的客户端的 Intranet，并且连接到远程 API 服务器。我使用 Angular 应用程序来提取 HTML，但它是 JSON 对象的一部分，因此显然这非常符合我自己的需求。

我碰巧完全控制了我的服务器的 CORS 属性，所以我可以做到这一点。如果你尝试谷歌或其他网站......你被 iframe 困住了。 （我不知道JS允许的东西这么严格！）

所以，这就是我获取远程 HTML 数据的方法。

1：

在我的控制器中，我添加了这个：<div ng-bind-html="content"></div>

然后在代码中，我添加这个

$http.get(url)
    .then(function (data) 
        $scope.content = $sce.trustAsHtml(data.data.PageData);
    );

就是这样。只是不要忘记 URL 中的站点必须允许您通过远程系统获取数据。

现在：只是为了好玩，在 CORS 发明之前，我曾经使用 IFRAME 从其他网站获取数据。这是一个大黑客。在 AJAX 之前，我会在一个页面上制作一个小表单，所有表单值都为空。在另一个页面上，我有一个 iframe，只需用 javascript 填充这些输入框，然后用 javascript 将它们发布回来，保持主页无需重新加载。

如果您需要对数据进行更多控制，您可以简单地拥有一个隐藏的 iframe，从中提取所需的 HTML，将其放入变量中，然后将其放在页面上的任意位置。

总有一些半美元的方式来完成工作。 :)