Проблема с использованием API laravel 5.7 в Angular7

Question

Я пытаюсь создать свой собственный API в laravel 5.7 и использовать его в Angular7.

Я попробовал API из JsonPlaceholder и все прошло хорошо.У меня проблемы, когда я пытаюсь использовать самодельный API в Laravel.Я попытался создать функцию в контроллере, которая возвращает json_encode($array). После этого я протестировал ее в Postman, и все прошло как ожидалось.

У json есть фиктивные данные, но это не имеет значения.

Когда я позвонил из Angular, я получил эту ошибку в консоли:

error: error { target: XMLHttpRequest, isTrusted: true, lengthComputable: false, … } ​ headers: Object { normalizedNames: Map(0), lazyUpdate: null, headers: Map(0) } ​ message: "Http failure response for http://127.0.0.1:8000/api/test: 0 Unknown Error" ​ name: "HttpErrorResponse" ​ ok: false ​ status: 0 ​ statusText: "Unknown Error" ​ url: "http://127.0.0.1:8000/api/test"

После этого я попытался использовать коллекцию в Laravel. Ответ Почтальона былхорошо, но угловой отклик тот же.

Способ Способ:

public function test() {
        $test = [
            'name' => 'Andi',
            'password' => 'Parola'
        ];

        return response()->json($test);
}

Способ сбора:

public function test() {
        $test = [
            'name' => 'Andi',
            'password' => 'Parola'
        ];

        return new ApiTest($test);
}

Служба Angular:

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

@Injectable({
  providedIn: 'root'
})

export class SteamCallsService {

  configUrl = 'http://127.0.0.1:8000/api/test';

  constructor(
    private http: HttpClient
  ) { }

  async newFunction():Promise<any> {
    try {
      const item = await this.http.get(this.configUrl).toPromise();
      return item;

    } catch (error) {
      console.error(error);
    }
  }
}

Угловая составляющая

import { Component, OnInit } from '@angular/core';

//Services
import {  SteamCallsService } from '../app/steam-calls.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  array = [];


  constructor (
    private _steamApi: SteamCallsService
  ) {}

  ngOnInit() {
    this.getJson();
  }

  async getJson() {
    const res = await this._steamApi.newFunction();

    this.array = res;  
  }
}

Я ожидаю простой ответ json.Изменить: на вкладке сети (из инспектора) статус запроса составляет 200, и данные именно то, что я ожидал.Почему я получаю эту ошибку и как я могу использовать эти данные?

Answer 1

Добавьте этот заголовок в ваш php файл

<?php
 header("Access-Control-Allow-Origin: *");
?>