AngularからLaravelのAPIをたたく

Question

AngularアプリケーションからLaravelで作ったAPIに接続してDBのデータを取得したいのですが、うまくいきません。

●表示されるエラー
Chromeで試していますが、開発者ツールには下記のようなエラーが表示されます。

HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "http://172.21.0.5:80/api/customers", ok: false, …}
message: "Http failure response for http://172.21.0.5:80/api/customers: 0 Unknown Error"

●前提条件
・AngularアプリもLaravelアプリもdocker環境で動いています。
・ローカルPCのブラウザのURL入力欄でAPIのURLを入力すると、ちゃんとほしい情報が返ってきます。
・Angularアプリが動いているnode.jsコンテナからcurlコマンドでAPIをたたくと、ちゃんとほしい情報が返ってきます。
・クロスドメインの対応はしてあります。

●各種ソースコード

<!-- customer-list.component.html -->
<button (click)="get()">get</button>
<table >
  <tr><th>Id</th><th>Name</th>
  <tr *ngFor="let customer of customers">
    <td>{{customer.customer_number}}</td>
    <td>{{customer.name}}</td>
  </tr>
</table>

// customer-list.component.ts

import { Component, OnInit } from "@angular/core";
import { CustomerService } from "../service/customer.service";
import { Customer } from "../shared/models/customer.model";
@Component({
  selector: "app-customer-list",
  templateUrl: "./customer-list.component.html",
  styleUrls: ["./customer-list.component.scss"]
})
export class CustomerListComponent implements OnInit {
  customers: Customer[];
  constructor(private cs: CustomerService) {}

  ngOnInit(): void {}

  get() {
    this.cs.getCustomerList().subscribe(res => {
      this.customers = res;
    });
  }
}

// customer.service.ts
import { Injectable } from "@angular/core";
import { Customer } from "../shared/models/customer.model";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs";
import { of } from "rxjs";
import { catchError } from "rxjs/operators";
@Injectable({
  providedIn: "root"
})
export class CustomerService {
  customers: Customer[];
  private url = "http://172.21.0.5:80/api/customers";

  constructor(private http: HttpClient) {}

  getCustomerList(): Observable<Customer[]> {
    return this.http
      .get<Customer[]>(`${this.url}`)
      .pipe(catchError(this.handleError("getCustomerList", [])));
  }

  private handleError<T>(operation = "operation", result?: T) {
    return (error: any): Observable<T> => {
      console.error(error);
      console.log(`${operation} failed: ${error.message}`);
      return of(result as T);
    };
  }
}

//customer.model.ts
export class Customer {
  customer_number: string;
  tel: string;
  name: string;
  name_kana: string;
  address: string;
  address_kana: string;
  birthday: string;
  sex: string;
  debt: number;
  point: number;
}

//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CustomerListComponent } from './customer-list/customer-list.component';

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

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

クロスオリジンの対応は以下のようにしています。

<?php

namespace App\Http\Middleware;
use Illuminate\Support\Facades\Log;
use Closure;

class Cors
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        $response = $next($request);
        $http_origin = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : "";
 
        if ($http_origin == "http://localhost:4200") {
            $response
                ->header("Access-Control-Allow-Origin" , $http_origin)
                ->header("Access-Control-Allow-Headers" , 'content-type');
        }
 
        return $response;
    }
}

//省略
protected $middleware = [
        \App\Http\Middleware\TrustProxies::class,
        \App\Http\Middleware\Cors::class, //追加
        \App\Http\Middleware\CheckForMaintenanceMode::class,
        \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
        \App\Http\Middleware\TrimStrings::class,
        \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
    ];

    /**
     * The application's route middleware groups.
     *
     * @var array
     */
    protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\Cors::class, //追加
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            \Illuminate\Session\Middleware\AuthenticateSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],

//省略

Comments

[miyabi_pudding]

まず、
export class Customerは、クラス的な使い方をしていないので、
interfaceにした方がいいかと。
export interface Customer
とするということです。
（初期化してないし、静的に使っているわけでもないため）
もう一点、メソッド名に"get"を使うのはやめましょう。
ゲッター定義のgetキーワードと被るので。
（もしかしたら、それで直ったり？）

ふむ・・・。特に問題なさそうですが、動きませんか・・・。

[keisukeh]

両方Dockerで立ち上げてるのであればDocker内のネットワークの設定がうまくいってないのではないでしょうか？

Answer 1

APIのURLを
172.21.0.5⇒localhost
へ変更したら通りました。
docker-composeのymlファイルにネットワーク設定もしたし、curlではIPアドレスでちゃんと通信できていたので大丈夫かと思ったのですが、localhostのブラウザから叩いているからなのかなと考えています。
もう少し調査をしますが、一旦問題は解決しましたのでクローズさせていただきます。