Cannot send data with HttpClient, Angular 4 with Symfony backend

Question

Solved by using NelmioCorsBundle.

I'm using angular 4.3.3 for frontend and Symfony3 for backend, and I use FosRestBundle also.

In Angular, and I'm working with HttpClient to send or request some data.

Requesting data is working good and I can display the results but the problem is when I try to send data I get this cors error

On the other hand I can post json data using postman

This is the error:

1:1 XMLHttpRequest cannot load 
http://127.0.0.1/rest/web/app_dev.php/api/comments/new/1. Response for preflight 
has invalid HTTP status code 405
Error occured.
{"content":"test comment","email":"test@gmail.com"}

and this is the code typeScript:

    import {HttpClient, HttpErrorResponse, HttpHeaders} from '@angular/common/http';

    constructor(private http: HttpClient, private globals: Globals, private activatedRoute: ActivatedRoute) {
}
    postComment(post) {
    const body = JSON.stringify(post);
    this.http.put(this.globals.baseUrl + 'comments/new/' + this.id, body).subscribe(
        res => {
            console.log(res);
        },
        err => {
            console.log('Error occured.');
            console.log(body)
        }
    );
}

In th symfony Project: web/.htaccess

<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>

Answer 1

To ensure your server responds to the OPTIONS request correctly, add this to your .htaccess:

RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

And to ensure all the right headers get sent, what you want is this:

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Allow-Headers "Content-Type"

And by the way, the reason you need to deal with that OPTIONS request to begin with is because your code is trying to do a PUT request cross-origin, and that triggers browsers to automatically make a CORs “preflight” OPTIONS request before trying the PUT—to check if the server OKs it.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests has more details, but that’s the gist of it for the specific case in the question.

And note that the reasons you don’t run into this with Postman include the fact that unlike browsers, Postman does not do any CORS preflight OPTIONS request and anyway also the fact Postman is not bound by cross-origin requests that browsers enforce on frontend JavaScript code in webapps.