在angularjs中从不同域加载html部分

Question

我希望能够从 amazon s3 加载 html 部分，所以我上传它们并像这样使用公共 url；

'use strict';

/* App Module */

var phonecatApp = angular.module('phonecatApp', [
  'ngRoute',
  'phonecatAnimations',

  'phonecatControllers',
  'phonecatFilters',
  'phonecatServices'
]);

phonecatApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'https://s3-us-west-2.amazonaws.com/playfield/phone-list.html',
        controller: 'PhoneListCtrl'
      }).
      when('/phones/:phoneId', {
        templateUrl: 'https://s3-us-west-2.amazonaws.com/playfield/phone-detail.html',
        controller: 'PhoneDetailCtrl'
      }).
      otherwise({
        redirectTo: '/phones'
      });
  }]);

但我收到这样的错误

 [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy.

当我像这样从类似的域切换到部分时；

templateUrl: '/partials/phone-list.html'

效果很好。

我很乐意提供任何帮助。 谢谢

Answer 1

另一种方法是在您的服务器端解决问题，该问题不受 CORS 约束。您编写了一个小型代理服务，该服务根据 URL 将请求转发到其他预定义的服务器。

因此，例如，任何定向到 /playfield/ 的请求都将使用特定协议（http 或 https）重定向到特定主机，例如 s3-us-west-2.amazonaws.com。

请求返回的内容就是您返回给客户的内容。

这样您现在可以安全地从您自己的服务器获取所有内容，并且您的客户端请求将不受 CORS 的约束。