Ionic 5 Get Request to Slim API


I would like to make a get request from my Ionic app to an API build with the Slim Framework.

This is the code of the API:

header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');
use \Psr\Http\Message\ServerRequestInterface as Request;
use \Psr\Http\Message\ResponseInterface as Response;
use Tuupola\Middleware\HttpBasicAuthentication;

require 'vendor/autoload.php';
$jwt_secret = '**************';

$app = new Slim\App;

$app->add(new Tuupola\Middleware\JwtAuthentication([
    "path" => "/api",
    "attribute" => "jwt",
    "secret" => $jwt_secret,  "error" => function ($response, $arguments) {
        $data["status"] = "error";
        $data["message"] = $arguments["message"];
        return $response
            ->withHeader("Content-Type", "application/json")
            ->withHeader("Access-Control-Allow-Origin", "*")
            ->getBody()->write(json_encode($data, JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT));

$app->get('/api/hello', function (Request $request, Response $response, array $args) 
    $decoded = $request->getAttribute("jwt");
    $response->getBody()->write(json_encode(array("status"=> "200", "message" => "HELLO ".$decoded['uid'] ." - " . $decoded['cus'])));

    return $response;

$app->get('/', function (Request $request, Response $response, array $args) {
    $response->getBody()->write(json_encode(array("status"=> "200", "message" => "Welcome to the API")));

    return $response;



When I’m testing with postman the API works fine. But when I’m trying to call it with the HTTPClient in Ionic, it doesn’t work. This is my Ionic Code:

import { Component } from '@angular/core';
import { HttpClient, HttpHeaders   } from '@angular/common/http';

  selector: 'app-home',
  templateUrl: '',
  styleUrls: [''],

export class HomePage {

  constructor(private http: HttpClient) 




The Error message is the following: :8100/home:1 Access to XMLHttpRequest at ‘http://localhost/slim3’ from origin ‘http://localhost:8100’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

core.js:6014 ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: “Unknown Error”, url: “http://localhost/slim3”, ok: false, …}

How can I fix it? Thanks!

There are countless post about your same issue, search them and you can find your answer.

There are posts, but they don’t help me :confused: