Angular で window.location.origin を使って baseUrl を設定する方法

2024-06-08

Angular HttpClient で baseUrl を設定する方法

環境変数を使う

environment.ts ファイルを作成し、baseUrl プロパティを定義します。例：

export const environment = {
  production: false,
  baseUrl: 'https://api.example.com',
};

サービスで environment.baseUrl をインジェクトし、API リクエストの URL を構成します。例：

import { HttpClient, Inject } from '@angular/common/http';
import { environment } from '../environments/environment';

constructor(private http: HttpClient, @Inject('BASE_URL') private baseUrl: string) {}

getData() {
  return this.http.get(this.baseUrl + '/data');
}

プロバイダを使う

HttpClientModule を forRoot() で設定する際、options オプションで baseUrl を指定します。例：

import { HttpClientModule } from '@angular/common/http';

providers: [
  {
    provide: HttpClientModule,
    useFactory: (httpInterceptor: HttpInterceptor) => {
      return new HttpClientModule({
        baseUrl: 'https://api.example.com',
        interceptors: [httpInterceptor],
      });
    },
    deps: [HttpInterceptor],
  },
],

補足

上記以外にも、HttpClientInterceptor を使って baseUrl を動的に設定する方法もあります。

例

以下の例は、environment.ts ファイルとサービスを使用して baseUrl を設定する方法を示しています。

environment.ts

export const environment = {
  production: false,
  baseUrl: 'https://api.example.com',
};

app.component.ts

import { Component } from '@angular/core';
import { HttpClient, Inject } from '@angular/common/http';
import { environment } from '../environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'Angular HttpClient Base Url';

  constructor(private http: HttpClient, @Inject('BASE_URL') private baseUrl: string) {}

  getData() {
    this.http.get(this.baseUrl + '/data')
      .subscribe(data => console.log(data));
  }
}

この例では、AppComponent コンポーネントは HttpClient と BASE_URL を注入し、getData() メソッドを使用して https://api.example.com/data エンドポイントに GET リクエストを送信します。

このコードはあくまで一例であり、実際の状況に合わせて変更する必要があります。

Angular HttpClient で baseUrl を設定するサンプルコード

環境変数を使う

export const environment = {
  production: false,
  baseUrl: 'https://api.example.com',
};

import { Component } from '@angular/core';
import { HttpClient, Inject } from '@angular/common/http';
import { environment } from '../environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'Angular HttpClient Base Url';

  constructor(private http: HttpClient, @Inject('BASE_URL') private baseUrl: string) {}

  getData() {
    this.http.get(this.baseUrl + '/data')
      .subscribe(data => console.log(data));
  }
}

<button (click)="getData()">データを取得</button>

説明

app.component.ts ファイルで HttpClient と BASE_URL を注入します。
getData() メソッドで baseUrl を使用して API リクエストの URL を構成します。
app.component.html ファイルでボタンをクリックすると getData() メソッドが呼び出されます。

プロバイダを使う

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'Angular HttpClient Base Url';

  constructor(private http: HttpClient) {}

  getData() {
    this.http.get('https://api.example.com/data')
      .subscribe(data => console.log(data));
  }
}

<button (click)="getData()">データを取得</button>

上記の例はあくまで基本的なものです。実際の状況に合わせて、必要なモジュールやプロバイダを追加したり、コードを変更したりする必要があります。

注意事項

このサンプルコードはあくまでも例であり、本番環境で使用するには十分なセキュリティ対策を講じてください。
特に、environment.ts ファイルに記載されている baseUrl は、本番環境では公開されないように注意する必要があります。

Angular HttpClient で baseUrl を設定するその他の方法

カスタム HTTP インターセプターを使う

カスタム HTTP インターセプターを作成し、リクエストごとに baseUrl を追加します。
例：

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class BaseUrlInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const baseUrl = 'https://api.example.com';
    const modifiedReq = req.clone({ url: baseUrl + req.url });
    return next.handle(modifiedReq);
  }
}

app.module.ts ファイルで BaseUrlInterceptor を HTTP_INTERCEPTORS プロバイダに登録します。例：

providers: [
  {
    provide: HTTP_INTERCEPTORS,
    useClass: BaseUrlInterceptor,
    multi: true
  },
],

APP_BASE_HREF プロバイダを使う

APP_BASE_HREF プロバイダを使用して、すべての API リクエストに baseUrl をプレフィックスします。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [
    {
      provide: APP_BASE_HREF,
      useValue: 'https://api.example.com'
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

window.location.origin を使う

アプリケーションがデプロイされているドメインを取得し、それを baseUrl として使用します。

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

getData() {
  const baseUrl = window.location.origin + '/api';
  this.http.get(baseUrl + '/data')
    .subscribe(data => console.log(data));
}