15

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

在这种情况下：

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

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

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

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

4

2 回答 2

23

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

默认情况下，模板 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/**'
  ]); 
});

有用的网址：

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

于 2013-11-15T06:52:11.790 回答
0

也许您可以稍微修改一下这段代码。我在数据库中有我的客户端的 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，将其放入变量中，然后将其放在页面上任何您想要的位置。

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

于 2015-10-29T18:53:57.320 回答