如何配置Angular $ http向其他主机发送请求？

我有一个Angular web应用程序部署到Heroku，从S3中抽取静态文件。我有RequireJS启用允许角度懒惰地加载控制器和模板。问题是，当应用程序加载时，window.location变量设置为myapp.heroku.com，所以所有加载模板的角度请求都会尝试执行类似myapp.heroku.com/path/to/my/template.html的操作，当我要它们执行此操作时mybucket.s3.amazon.com/path/to/my/template.html。我不得不做一些小技巧来让RequireJS从S3而不是Heroku加载文件，但我似乎无法弄清楚如何修改Angular的$ http服务，以便所有请求都转到S3。任何帮助将不胜感激！

来源

2016-09-24 Mitch W.

我能够让Angular从S3加载模板而不是当前的主机！首先，一些在这里的科技我使用：

RequireJS让我的应用程序的模块化
角
角UI路由器状态在应用
角AMD路由，以帮助调和角与RequireJS

的解决方案需要一个创造称之为config.js一个RequireJS模块抓住配置直基本URL从像这样RequireJS：

define([], function(){ 
    var baseUrl = require.s.contexts._.config.baseUrl; 
    var host = baseUrl.substring(0, baseUrl.indexOf('/', baseUrl.indexOf('://') + 3)) + "/"; 
    return { 
     baseUrl : baseUrl, 
     hostUrl : host 
    } 
});

由于我访问的并不是非常公开的RequireJS API，所以这有点冒失。 RequireJS的更高版本可能会改变您访问配置的方式。我导出baseURL和hostURL，因为它们都可能有用。现在

，我的模块中，实际上定义了所有的状态和模板的路线，我只是导入这个模块，并在前面加上hostUrl来给角UI路由器像这样的templateUrl：

define(['angularAMD', 'config'], function(angularAMD, config){ 
'use strict'; 
var host = config.hostUrl; 
var routes = {}; 
routes.authenticated = {}; 
routes.unauthenticated = {}; 
routes.unauthenticated.splash = angularAMD.route({ 
    name: 'splash', 
    url: '/splash', 
    templateUrl : host +'static/webpages/views/splash.html', 
    controller: 'splashController', 
    controllerUrl : 'controllers/splash' 
}); 
return routes;

}）;

我们还没有完成。我们也有一个白名单的S3域在$ sceProvider像这样：

var app = angular.module('webapp', ['ui.router', 'LocalStorageModule']); 
app.config(function($sceDelegateProvider){ 
     $sceDelegateProvider.resourceUrlWhitelist([ 
     // Allow same origin resource loads. 
     'self', 
     'https://mybucket.s3.amazonaws.com/**', 
     'https://mybucket.s3.amazonaws.com/**' 
    ]); 
});

我的错误的根源就来自RequireJS和AngularAMD可以串联使用加载JavaScript文件的事实，但他们不会为你加载HTML文件。 Angular和Angular UI路由器仍将负责加载模板。

来源

2016-09-26 18:14:16

如何配置Angular $ http向其他主机发送请求？

回答

相关问题