web-dev-qa-db-ja.com

angular 2つのHTTP要求のベースURLを設定します

すべてのangular 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 に送信されます。

angular 2アプリケーションでhttp要求のベースURLを設定するにはどうすればよいですか？

私はAngular 2.0.0-beta.0を使用しています。

angularangular2-http
46
TheKojuEffect

angular 4.3+および@ angular/common/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 { }

編集：HttpClientとHttpInterceptorはAngular 4.3で導入されました

47
vegazz

更新：Angularの@vegazzの回答を参照してください4。

Angular 2.2.1の場合、以下はweb api base 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など）をカバーしているようです

17
corolla

Angular2バージョン2.2の場合（2016年12月の場合）

Angular from 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がthis._defaultOptions以外の新しいRequestOptionsを生成し、そのマージメソッドがCustomRequestOptionsによってオーバーライドされないためです。 （ ソースコード を参照してください）。

したがって、CustomRequestOptionsマージメソッドの最後のステップでsuper.merge(...)を返す代わりに、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メソッドでも機能します。これが役に立てば幸いです。

11
yeelan

Angular 2.0.0-beta.6これは、「merge」をオーバーライドすることで実現できます

import {BaseRequestOptions, RequestOptions, RequestOptionsArgs} from 'angular2/http';

export class ApRequestOptions extends BaseRequestOptions {

  merge(options?:RequestOptionsArgs):RequestOptions {
    options.url = 'http://10.7.18.21:8080/api' + options.url;
    return super.merge(options);
  }

}
6
Adrian Sobiczewski

別のアプローチ：開発中にローカルホストでアプリを実行する場合は、代わりにproxyを構成することを検討してください。

proxy.conf.json

{
   "/api/**": {
      "target": "http://10.7.18.21:8080/",
      "secure": false,
      "logLevel": "debug"
   }
}

詳細： リンク

5
istibekesi

BaseRequestOptions、RequestOptions、およびHttpクラスのコードソースを確認した後：

urlプロパティはデフォルトのURLに対応していますが、URLのプレフィックスには対応していないようです。

ユースケースを実装するには、httpオブジェクトの前にサービスを配置し、サービスを挿入することをお勧めします。そんな感じ：

import {Injectable} from '@angular/core';
import {Http} from '@angular/http';

@Injectable()
export class HttpClient {
  http: Http;
  urlPrefix: string;

  constructor(http: Http) {
    this.http = http;
    this.urlPrefix = 'http://...';
  }

  get(url) {
    return this.http.get(this.urlPrefix + url);
  }

  post(url, data) {
    return this.http.post(this.urlPrefix + url, data);
  }
}

そして

import {HttpClient} from './http-client';

export classMyComponent {
  constructor(httpClient: HttpClient) {
    this.httpClient = httpClient;
  }

  handleSomething() {
    this.httpClient.post(url, data)
    ).subscribe(...);
  }
}

これはおそらくAngular2自体に貢献する可能性があるということです;-)

お役に立てばと思います、ティエリー

5
Thierry Templier
import {LocationStrategy} from 'angular2/router';

constructor(private locationStrategy:LocationStrategy) {
  console.log(locationStrategy.prepareExternalUrl('xxx'));
}

こちらもご覧ください https://github.com/angular/angular/blob/1bec4f6c6135d7aaccec7492d70c36e1ceeaeefa/modules/angular2/test/router/path_location_strategy_spec.ts#L88

1
Günter Zöchbauer

現在のユーザーの場合、これはangular 2.4.8で実際に動作する例です

ここ は、なぜ分割および連鎖されたのかを示すコードですBaseCommonRequestOptionsおよびCommonRequestOptions。

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

@Injectable()
export class BaseCommonRequestOptions extends BaseRequestOptions {

  merge(options?: RequestOptionsArgs): RequestOptions {
    return new CommonRequestOptions(super.merge(extracted(options)));
  }
}

/**
 * for inner merge when using post put patch delete...others method
 */
export class CommonRequestOptions extends RequestOptions {
  merge(options?: RequestOptionsArgs): RequestOptions {
    return new RequestOptions(super.merge(extracted(options)));
  }
}

/**
 * inject default values
 *
 * @param options
 * @returns {RequestOptionsArgs}
 */
export function extracted(options: RequestOptionsArgs) {
  console.log(options);
  if (!validUrl(options.url)) {
    options.url = 'http://localhost:3000' + (options.url ? options.url : "");
  }
  // use default header application/json, if content-type header was empty.
  if (options.headers != null) {
    let contentType = options.headers.get('content-type');
    if (contentType == null || contentType == '') {
      options.headers.append('content-type', 'application/json');
    }
  } else {
    options.headers = new Headers({ 'content-type': 'application/json' });
  }

  return options;
}

/**
 * validate url
 *
 * @param url
 * @returns {boolean}
 */
export function validUrl(url: string) {
  return /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(url);
}
0
Jinseoung Lee

.tsファイルを作成する

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


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

}

その後、app.module.tsで

import { ApiXHRBackend } from './guard/httpintercepter';
import {Request, XHRBackend, XHRConnection} from '@angular/http';

プロバイダーセクションにプロバイダーを追加する

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

あなたのservice.tsでhttp呼び出しは次の例のようにする必要があります

return this._http.post("/api/customerservice/loginvalidation",data)
.map((response: Response) => {
return response;
});

ここで、/ apiはベースURLに置き換えられます http：// localhost：808

詳細 http://shabeen.in/webschool/how-to-set-angular-2-service-http-base-url/

0
codelover