时间戳

首页 > 解决方案 > 使用 Laravel API 在 Angular 中不显示数据

php - 使用 Laravel API 在 Angular 中不显示数据

问题描述

使用 Laravel 后端和 Angular 前端。我在 Angular 中有以下代码段，employee.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from 'src/app/service/data.service';

@Component({
  selector: 'app-employees',
  templateUrl: './employees.component.html',
  styleUrls: ['./employees.component.css']
})
export class EmployeesComponent implements OnInit {
  // tslint:disable-next-line: whitespace
  // tslint:disable-next-line: typedef-whitespace
  employees: any;

  constructor(private dataService: DataService) { }

  ngOnInit(): void {
    this.getEmployeesData();
  }

  // tslint:disable-next-line: typedef
  getEmployeesData() {
    this.dataService.getData().subscribe(res => {
      this.employees = res;
    });
  }

}

数据服务.ts

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

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private httpClient: HttpClient) { }

  // tslint:disable-next-line: typedef
  getData() {
    return this.httpClient.get('http://127.0.0.1:8000/api/employee');
  }

 
}

员工.component.html

<table class="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Name</th>
            <th scope="col">Email</th>
            <th scope="col">Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let emp of employees">
            <th scope="row">{{emp.id}}</th>
            <th> {{emp.name}}</th>
            <th>{{emp.email}}</th>
            <th> {{emp.salary}}</th>
        </tr>
    </tbody>
</table>

和我的 Laravel api.php

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

Route::get('employee','EmployeeController@getEmployee');

Route::get('employee/{id}','EmployeeController@getEmployeeById');

Route::post('addEmployee','EmployeeController@addEmployee');

Route::put('updateEmployee/{id}','EmployeeController@updateEmployee');

Route::delete('deleteEmployee/{id}','EmployeeController@deleteEmployee');

但在我的 Angular html 文件中不是数据库员工数据。这里没有任何错误。Angular 和 Laravel 项目都在运行。我该如何解决这个问题？

在控制台中 编辑我的错误Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/employee' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

127.0.0.1:8000/api/employee:1 Failed to load resource: net::ERR_FAILED

ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "http://127.0.0.1:8000/api/employee", ok: false, …}

标签： phpmysqlangularlaravel

解决方案

您的请求被 CORS 阻止。为了解决您的问题，您应该尝试更新cors.php以允许您的主机（请记住也包括端口，因为它很重要）。

或者，您可以遵循Laravel 5.1 API Enable Cors，尽管它很旧，但这些概念确实适用。

已编辑：根据对问题的评论，这个 SO 答案也可能很有用。

推荐阅读