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:
<code>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');
</code>
<code>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');
</code>
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:
<code>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 });
}
}
</code>
<code>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 });
}
}
</code>
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
2