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

Question

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

在这种情况下:

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

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

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

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

Answer 1

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

By default, the template URL is restricted to the same domain and protocol as the application document. This is done by calling $sce.getTrustedResourceUrl on it. To load templates from other domains or protocols you may either whitelist them or wrap them as trusted values. Refer to Angular's Strict Contextual Escaping.

和

Please note: The browser's Same Origin Policy and Cross-Origin Resource Sharing (CORS) policy apply in addition to this and may further restrict whether the template is successfully loaded. This means that without the right CORS policy, loading templates from a different domain won't work on all browsers.

示例:

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

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