在angularjs中加载来自不同域的html部分

时间:2014-01-15 15:08:02

标签: javascript angularjs cors

我希望能够从亚马逊s3加载html部分,所以我上传它们并像这样使用公共网址;

'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'

它运作得很好。

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

1 个答案:

答案 0 :(得分:1)

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

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

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

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