Nelmio_cors : error 400 when doing a POST to API - api

Question

here is my problem. I have a front website on Angular 5 and a back API on Symfony 3.4.
I am using FOSRestBundle to make my API requests. When I try to do a POST request to my API, I got an error : "Failed to load http://127.0.0.1:8000/api/pro/login: Response for preflight has invalid HTTP status code 400."
Here are my different codes :
LoginController.php :
<?php
namespace ProBundle\Controller;
use FOS\RestBundle\Controller\Annotations as Rest;
use Proxies\__CG__\ProBundle\Entity\Utilisateur;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\ParamConverter;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Symfony\Component\HttpFoundation\Response;
class LoginController extends Controller
{
/**
* #Rest\Post(
* path = "/api/pro/login",
* name = "dropnride_pro_login"
* )
* #Rest\View
* #ParamConverter("utilisateur", converter="fos_rest.request_body")
*/
public function loginAction(Utilisateur $utilisateur)
{
$response = new Response($utilisateur->loginToString());
return $response;
}
}
login.component.ts :
import { Component } from '#angular/core';
import { NgForm } from '#angular/forms';
import { LoginService } from '../services/login.service';
#Component({
selector: 'dropnride-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss'],
providers: [LoginService]
})
export class LoginComponent {
constructor(private _loginService: LoginService) { }
onSubmit(form: NgForm) {
const email = form.value['email'];
const password = form.value['password'];
this.askLogin(email, password);
}
askLogin(email: string, motDePasse: string) {
const userData = {
email: '',
motDePasse: '',
}
userData.email = email;
userData.motDePasse = motDePasse;
// Contact de l'API
this._loginService.getLoginData(userData);
}
}
login.service.ts :
import { Injectable } from '#angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '#angular/common/http';
import { Observable } from 'rxjs/Observable';
const loginUrl = "http://127.0.0.1:8000/api/pro/login";
#Injectable()
export class LoginService {
constructor(private http: HttpClient) {
}
getLoginData(userData) {
const headers = new HttpHeaders({
'Content-Type': 'application/json'
});
console.log(userData);
return this.http.post(loginUrl, userData, {headers: headers}).subscribe(data => {
console.log(data);
});
}
}
My API calls works well with Postman :
API call through Postman
I have installed and configured NelmioCorsBundle in my config.yml :
nelmio_cors:
defaults:
allow_credentials: false
allow_origin: ['*']
allow_headers: ['*']
allow_methods: []
expose_headers: []
max_age: 0
hosts: []
origin_regex: false
forced_allow_origin_value: ~
paths:
'^/api/':
allow_origin: ['*']
allow_headers: ['X-Custom-Auth']
allow_methods: ['POST', 'PUT', 'GET', 'DELETE']
max_age: 3600
'^/':
origin_regex: true
allow_origin: ['^http://localhost:[0-9]+']
allow_headers: ['X-Custom-Auth']
allow_methods: ['POST', 'PUT', 'GET', 'DELETE']
max_age: 3600
hosts: ['^api\.']
I've nearly tried all of the other stackoverflow's members proposal for similar problems, I couldn't find a solution working for me... Would you have any idea that would help me with my problem ? Thanks a lot in advance :)

Answer 1

Try setting Content-Type too as allowed header
allow_headers: ['X-Custom-Auth', 'Content-Type]
And allow 'OPTIONS' (not sure if it's actually needed)
allow_methods: ['POST', 'PUT', 'GET', 'DELETE', 'OPTIONS']