为角2 http请求设置基url

Question

我正试图为我所有的角2 http请求设置基本url。下面是我的应用程序的基本设置。

class HttpOptions extends BaseRequestOptions {
  url:string = "http://10.7.18.21:8080/api/";
}


bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  provide(RequestOptions, {useClass: HttpOptions})
]);


export class AppComponent {
  users:Array<User>
  constructor(private http: Http) {
    http.get("/users")
      .subscribe(res => this.users = res.json());
  }
}

请求不会像我从配置中期望的那样发送到http://10.7.18.21:8080/api/users。相反，请求被发送到http://localhost:8000/users。

如何在角2应用程序中为http请求设置基url？

我使用的是角2.0.0-beta.0。

Answer 1

表示角4.3+和@角/公共/http

这可以用拦截器来完成

@Injectable()
export class ExampleInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const url = 'http://myurl.com';
    req = req.clone({
      url: url + req.url
    });
    return next.handle(req);
  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { Injectable } from '@angular/core';
import { HttpClientModule, HttpRequest, HTTP_INTERCEPTORS } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    ...
  ],
  providers: [
    AppComponent,
    { provide: HTTP_INTERCEPTORS, useClass: ExampleInterceptor, multi: true }
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

编辑:在角4.3中引入了HttpClient和HttpInterceptor

Answer 2

更新:见@vegazz回答角4。

对于角2.2.1，下面的前缀应该是web基url，并且表示较小的占用空间：

import {Request, XHRBackend, XHRConnection} from '@angular/http';

@Injectable()
export class ApiXHRBackend extends XHRBackend {
    createConnection(request: Request): XHRConnection {
        if (request.url.startsWith('/')){
            request.url = 'http://localhost:3000' + request.url;     // prefix base url
        }
        return super.createConnection(request);
    }
}

注入app.module.ts中的提供程序：

providers: [
    { provide: XHRBackend, useClass: ApiXHRBackend }
  ]

用法示例：

this._http.post('/api/my-route', {foo: 'bar'})
            .map<MyResponse>(res => res.json())

它似乎涵盖了所有方法(GET，PUT，POST，.)

Answer 3

Angular2 2.2版(2016年12月)

从RC5标记HTTP_PROVIDERS的角度来看，它被废弃并试图将事物移动到@NgModule中，所以上面的解决方案实际上并不适用，因为它们的文档也是如此。我交叉引用了其他几个答案，并找到了实现基本url的方法，希望这可能对其他人有所帮助。

基本的想法是，与其在引导中做一些事情，不如将事情转移到AppModule中。

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule, RequestOptions } from '@angular/http';


import { CustomRequestOptions } from './customrequest.options';

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    HttpModule,
    ...
  ],
  providers: [
    { provide: RequestOptions, useClass: CustomRequestOptions }
  ],
  bootstrap: [ AppComponent ]
})

并将CustomRequestOptions移动到单独的可注入服务中。

import { Injectable } from '@angular/core';
import { BaseRequestOptions, RequestOptions, RequestOptionsArgs } from '@angular/http';

@Injectable()
export class CustomRequestOptions extends BaseRequestOptions {
  merge(options?:RequestOptionsArgs):RequestOptions {
    options.url = 'http://localhost:9080' + options.url;
    return super.merge(options);
  }
}

为GET以外的请求方法进行编辑。

如果试图发送GET以外的请求类型，则前面的方法无法将baseurl注入请求。这是因为Angular2生成了新的RequestOptions，而不是this._defaultOptions，它的合并方法没有被CustomRequestOptions覆盖。(参见这里的源代码 )。

因此，我没有在super.merge(...)合并方法的最后一步返回CustomRequestOptions，而是生成了一个新的CustomRequestOptions实例，以确保下面的操作仍然工作。

import { Injectable } from '@angular/core';
import { RequestOptions, RequestOptionsArgs } from '@angular/http';

@Injectable()
export class CustomRequestOptions extends RequestOptions {
  merge(options?: RequestOptionsArgs): RequestOptions {
    if (options !== null && options.url !== null) {
      options.url = 'http://localhost:9080' + options.url;
    }
    let requestOptions = super.merge(options)
    return new CustomRequestOptions({
      method: requestOptions.method,
      url: requestOptions.url,
      search: requestOptions.search,
      headers: requestOptions.headers,
      body: requestOptions.body,
      withCredentials: requestOptions.withCredentials,
      responseType: requestOptions.responseType
    });
  }
}

这也适用于POST、PUT、DELETE方法。希望这会有帮助。