在 Angular7 中使用 laravel 5.7 API 的问题

Question

我正在尝试在 laravel 5.7 中创建自己的 API 并在 Angular7 中使用它。

我尝试了 JsonPlaceholder 的 API，一切顺利。 当我尝试在 Laravel 中使用自制 API 时遇到问题。 我尝试在控制器中创建一个返回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 中使用一个集合。Postman 响应还可以，但是角度响应是一样的。

方法方式：

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

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

采集方式：

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

        return new ApiTest($test);
}

角度服务：

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: *");
?>