我有一个Angular 2应用程序,它将安装在多个服务器上,并且需要访问同样位于多个服务器上的后端。我使用了来自this answer的代码,特别是使用GET以外的方法进行的编辑,如果我对后端网址进行硬编码,则效果很好。
对于给定的前端服务器,它需要访问的后端始终是相同的。例如,如果前端位于" example.com",则后端将始终位于" example.com:9080"。
我可以为每个不同的服务器捆绑应用程序,更改" localhost:9080"在#34; example1.com:9080"," example2.com:9080"等的答案中,视情况而定。这意味着必须进行代码更改并为每个服务器捆绑应用程序。
有没有办法可以以某种方式获取我需要为后端访问的URL,这样我就可以将其捆绑一次并将其部署到所有服务器上?
我使用Angular 2.4.5并使用Apache服务于前端。
答案 0 :(得分:0)
我定位IIS,因此我使用http处理程序根据环境动态解决此问题,但您可以使用单个js文件实现它,如下所示:
按以下方式创建一个包含要加载到应用程序中的设置的js文件:
var js = {}; js.settings = { API_URL : 'your_api_url_here' };
创建一个类来映射应用中的这些值:
export class Settings { API_URL: string; }
确保在应用程序脚本之前加载js文件,因此将其放在index.html中:
<script src="env.js"></script>
现在,在您的app.module中,将这些值映射到您的“设置”类中,并定义它们的提供方式:
// needed to avoid the TS compilation error.
// This can be placed at the top of your app.module file.
declare var js: any;
@NgModule({
imports: [...],
declarations: [...],
providers: [{
provide: Settings, useFactory: ()=> { return js.settings; }}] })
export class AppModule{}
现在将Settings对象注入您可能需要的任何位置,如下所示:
export class ServiceBase {
protected apiUrl: string;
constructor(private settings: Settings){
this.apiUrl = settings.API_URL;
}
希望这也适合你。
答案 1 :(得分:0)
您真的不希望在您的应用程序中拥有此功能。这应该是配置,因为它取决于您所在的服务器(换句话说,您不希望在以后添加服务器时更改代码并重建)。因此,我的猜测是你真的想在你的apache服务器上解决这个问题。您可以考虑使用ProxyPass和ProxyPassReverse(在httpd.conf或htaccess中)。这样你就不必担心在你的应用程序中担心它,你只会使用api端点的相对路径。
例如,假设您有来自example.com的角度应用程序,并且您的后端api位于example.com:9080/api /.
您的代码只需使用/ api作为端点的路径,ProxyPass会使用以下内容将其重写到后端:
ProxyPass /api example.com:9080
ProxyPassReverse /api example.com:9080
您需要安装MOD_PROXY(在大多数主机上很常见):https://httpd.apache.org/docs/current/mod/mod_proxy.html