Data Not Displaying In Angular with Laravel API

Question

working with Laravel back end and Angular front end. I have following code segments in 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;
    });
  }

}

data.service.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');
  }

 
}

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>

and my 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');

but in my Angular html file not database employees data. not any errors here. both Angular and Laravel projects are running. how could I fix this problem?

Edit My Error in Console 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, …}

in chrome ctrl+shift+j or ctrl+shift+i and go to network tab and hit your api. here you will see the details of api. response or error of api. and in console tab you can see your errors. — Farhat Zaman, Mar 11 '21 at 11:57
it's a cross origin issue. you need to fix this in your laravel application by allowing the domain to access api. there are plenty of solutions available about cross origin issue. — Farhat Zaman, Mar 11 '21 at 12:11
actually i am a frontend dev so i don't know much about laravel. but you can try this [solution](https://therichpost.com/solved-laravel-angular-cors-issue/). — Farhat Zaman, Mar 11 '21 at 12:25
you can update the `config/cors.php` file to accept localhost:4200 — CleanCode, Mar 11 '21 at 12:57
I got success using this https://stackoverflow.com/questions/54212220/how-to-fix-access-to-xmlhttprequest-has-been-blocked-by-cors-policy-redirect-i — dumuthu, Mar 11 '21 at 13:03

score 0 · Answer 1 · answered Mar 11 '21 at 18:45

Your requests are blocked by CORS. In order to fix your issue you should try updating cors.php to allow your host (remember to include the port too, as it is important).

Alternatively, you may follow Laravel 5.1 API Enable Cors albeit old, the concepts do apply.

Edited: as per comments on the question, this SO answer could be useful too.

Data Not Displaying In Angular with Laravel API

1 Answers1