Angular CORS Settings for localhost

I am quite troubled with an angular cors problem, using localhost and php files on a webserver.

When I build my projects, put it on the server as well, everything works fine. But when I am working on "ng serve" and try to access the php file on the server, I will get the typical "HTTP Request Error" status 0

Looking deeper in Chrome it shows me, that I am missing Headers: *logData.php?elem=lars blocked Access-Control-Allow-Origin Missing Header*

My PHP connection script starts as follows:

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST, DELETE");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
header('Content-Type: application/json; charset=utf-8');


Therefore I am not sure, what setting in angular I am missing, as I cannot communicate with the server with angular on localhost:

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

@Injectable({
providedIn: 'root'
})

export class DataService {

constructor(
private http: HttpClient
) { }

// Database Handling
baseUrl = 'https://www.example.de/leonie/api/';

login(elem:any) {
console.log('Dataservice reached')
const params = new HttpParams().set('elem', elem.toString());
return this.http.get(`${this.baseUrl}admin/logData.php`, { params: params });
}
}


Anyone has a clue, what to do here? I am troubled, because in the past projects it was working fine and I only have this problem after creating a new angular project. But I am doing exactly the same, also recycle a lot of code from the last project, where it works...

Thanks in advance Lars

Continue reading...