Как мне получить директиву ng-include для работы с сетью доставки контента?

Можно ли получить директиву ng-include для работы с CDN?

В этом случае:

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

Поддомен cdn someebsite.com отображается через DNS/CName в сеть доставки контента.

Однако при загрузке основного сайта someebsite.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/**'
  ]); 
});

Полезные ссылки:

Таким образом, ваша проблема может быть решена с помощью соответствующих параметров Angular, но не для всех браузеров.

Ответ 2

Возможно, вы можете немного изменить этот код. У меня есть клиентская интрасеть в datatbase и подключена к удаленному серверу API. Я использую приложение angular, чтобы вытащить HTML, но он является частью объекта JSON, поэтому, очевидно, это довольно специфично для моих собственных потребностей.

Я получаю полный контроль над атрибутами CORS моего сервера, поэтому я могу это сделать. Если вы попробуете Google или какой-нибудь другой сайт... вы застряли с iframe. (Я не знаю, что такое JW настолько строгое!)

Итак, вот что я делаю, чтобы получить удаленные данные HTML.

1

В моем контроллере я добавляю следующее:
  <div ng-bind-html="content"></div>

то в коде я добавлю это

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

Что это. Просто не забывайте, что сайт в URL-адресе должен позволять вам получать данные через удаленную систему.

СЕЙЧАС: Просто для удовольствия я использовал IFRAME для доставки данных с других сайтов до того, как CORS был даже изобретен. Это был большой взлом. Перед AJAX я сделал бы крошечную форму на одной странице со всеми значениями форм, пустыми. На другой странице у меня будет iframe для этого и просто заполните эти поля ввода javascript и опубликуйте их обратно с помощью javascript, сохранив основную страницу без перезагрузки.

Если вам нужно больше контролировать свои данные, вы можете просто иметь скрытый iframe, разорвать HTML-код, который вы хотите от него, поместить в переменную и отбросить все, что хотите на своей странице.

Всегда есть какой-то способ, чтобы все было сделано.:)