Angular-Slim: CORS when call post - php

Question

From localhost: 4200 I am trying to make a POST request, to my Slim REST API (3.0 v), which I have hosted on a server.
when I execute the "post" query, the following error appears:
ERROR
This is my code in the api:
<?php
require 'vendor/autoload.php';
use \Slim\App;
use Psr\Http\Message\ResponseInterface as Response;
use Psr\Http\Message\ServerRequestInterface as Request;
$app = new Slim\App(['settings' => ['displayErrorDetails' => true]]);
//permite el acceso cors.
$app->options('/{routes:.+}', function ($request, $response, $args) {
return $response;
});
$app->add(function ($req, $res, $next) {
$response = $next($req, $res);
return $response
->withHeader('Access-Control-Allow-Origin', '*')
->withHeader('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Accept, Origin, Authorization,token')
->withHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS')
->withHeader('access-control-expose-headers', 'token,Authorization');
});
require_once "src/routes/routes.php";
$app->run();
ANGULAR: : auth.service.ts
import { GLOBAL } from './global';
import { Router } from '#angular/router';
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
const httpOptions = {
observe: 'response' as 'response',
};
#Injectable({
providedIn: 'root'
})
export class AuthService {
public url: string;
constructor(
public http: HttpClient,
private router: Router) { this.url = GLOBAL.url; }
login(user) {
return this.http.post(this.url + 'login', user, httpOptions);
};
loggedIn() {
//devuelve true si contiene token o falso
return !!localStorage.getItem('token');
}
registrarse(user) {
return this.http.post(this.url + 'usuario', user, httpOptions)
};
}
ANGULAR: : home.component.ts
import { Empresa } from './../../models/empresa';
import { EmpresaService } from './../../services/empresa.service';
import { AuthService } from './../../services/auth.service';
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
empresa: Empresa;
user = {
'id': '',
'email': ''
}
constructor(
private authService: AuthService,
private empresaService: EmpresaService) { }
ngOnInit() {
this.getEmpresa();
this.postLogin();
}
// This request goes well.
getEmpresa() {
let id = 1;
this.empresaService.getEmpresa(id).subscribe(
result => {
console.log(result)
this.empresa = result['data'];
}
)
}
// This request shows me the error
postLogin() {
let user = {
'email': 'adri',
'password': 'adri'
}
this.authService.login(user).subscribe(
result => {
console.log(result.body)
this.user = result.body['data'];
}
)
}
}
Note*:
when I put the API in localhost, the two requests work very well for me: The getEmpresa () and the postLogin ().
but when I put the api on the server, the postLogin () fails.

Answer 1

Angular by default sends in body requests in Content-Type: application / json.
And it is seen that in a more optimized way in production it must be sent in Content-Type: in text / plain.
I have added this code in angular:
const httpOptions = {
observe: 'response' as 'response',
headers: new HttpHeaders({
'Content-Type': 'text/plain',
})
};
#Injectable({
providedIn: 'root'
})
export class AuthService {
public url: string;
constructor(
public http: HttpClient,
private router: Router) { this.url = GLOBAL.url; }
login(user) {
return this.http.post(this.url + 'login', user, httpOptions)
}
and in my REST Slim API I have added the following:
-> json_decode: to decrypt the file that is in JSON format
$app->post('/login', function (Request $request, Response $response) {
$db = conexion();
$json = $request->getBody();
$input = json_decode($json, true);
$sql = "SELECT * FROM usuario WHERE email= :email";
...
...
}