“CORS：不存在‘Access-Control-Allow-Origin’header”，但存在

Question

I'm trying to log in or register in my Angular app, but whenever I access to the php file which does the HTTP calls to the DB regarding users (authentication.php), I get three errors:

1. Access to XMLHttpRequest at 'http://localhost/authentication.php?command=login' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

2. ERROR Error: Uncaught (in promise): HttpErrorResponse: {"headers":{"normalizedNames":{},"lazyUpdate":null,"headers":{}},"status":0,"statusText":"Unknown Error","url":"http://localhost/authentication.php","ok":false,"name":"HttpErrorResponse","message":"Http failure response for http://localhost/authentication.php: 0 Unknown Error","error":{"isTrusted":true}}

3. GET http://localhost/authentication.php?command=login net::ERR_FAILED

(The last one says GET for login, POST for register)

In authentication.php I have the following code regarding headers:

require "openDB.php";
include "validators/usuarioValidator.php";

In openDB.php :

header('Access-Control-Allow-Origin: http://localhost:4200');
header('Access-Control-Allow-Headers: *');
header('Access-Control-Allow-Methods: PUT, DELETE, POST, GET');

In validators/usuarioValidator.php :

header('Access-Control-Allow-Origin: http://localhost:4200');
header('Access-Control-Allow-Headers: *');
header('Access-Control-Allow-Methods: PUT, DELETE, POST, GET');

I've tried writing those headers in authentication.php , adding OPTIONS to Allow-Methods and allow all origins with *, but I still get the same three errors.

My user.service.ts has the following code regarding these operations:

register(user : any, key : string) : Promise<any>{
    let parametros = new HttpParams().set("command", "register");

    user.verif = key;

    return this.http.post(this.url, user, {params: parametros}).toPromise();
  }

(I'm just pasting register because login is a bit weirdly done and the problem here seems to be with authentication.php , no matter what operation it makes)

I've also tried adding withCredentials: true and responseType: "blob" to params since I'm not receiving a json in the TS, but still nothing.

Answer 1

It seems like you are not setting Headers properly in your HTTP Request body, try the following code,

register(user : any, key : string) : Promise<any>{
    let parametros = new HttpParams().set("command", "register");

    user.verif = key;

    return this.http.post(this.url, user, {Headers: parametros}).toPromise();
  }

Also, if you use the HTTPClient package to make requests then it's a bit hard to set custom headers . If you can prevent some issues (like CORS Access-Control Errors) by using axios or a similar package