CORS: PHP: Response to preflight request doesn't pass. Am allowing origin

OK I had a similar issues recently and I solved everything only on the backend side with no .htaccess stuff.

when the browser sends cross server requests it firsts sends an OPTIONS request to make sure it is valid and it can send the "real" request. After it gets a proper and valid response from OPTIONS, only then it sends the "real" request.

Now for both request on the backend you need to make sure to return the proper headers: content-type, allow-origin, allow-headers etc...

Make sure that in the OPTIONS request on the backend, the app returns the headers and returns the response, not continuing the full flow of the app.

In the "real" request, you should return the proper headers and your regular response body.

example:

    //The Response object
    $res = $app->response;

    $res->headers->set('Content-Type', 'application/json');
    $res->headers->set('Access-Control-Allow-Origin', 'http://example.com');
    $res->headers->set('Access-Control-Allow-Credentials', 'true');
    $res->headers->set('Access-Control-Max-Age', '60');
    $res->headers->set('Access-Control-Allow-Headers', 'AccountKey,x-requested-with, Content-Type, origin, authorization, accept, client-security-token, host, date, cookie, cookie2');
    $res->headers->set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');

    if ( ! $req->isOptions()) {
        // this continues the normal flow of the app, and will return the proper body
        $this->next->call();
    } else {
        //stops the app, and sends the response
        return $res;
    }

Things to remember:

• if you are using: "Access-Control-Allow-Credentials" = true make sure that "Access-Control-Allow-Origin" is not "*", it must be set with a proper domain! ( a lot of blood was spilled here :/ )

• define the allowed headers you will get in "Access-Control-Allow-Headers" if you wont define them, the request will fail

• if you using "Authorization: Bearer", then "Access-Control-Allow-Headers" should also contain "Authorization", if not, the request will fail

In my similar case with Angular frontend and Php backend helped code below. Firstly I send a headers:

header("Access-Control-Allow-Origin: http://localhost:4200");   
header("Content-Type: application/json; charset=UTF-8");    
header("Access-Control-Allow-Methods: POST, DELETE, OPTIONS");    
header("Access-Control-Max-Age: 3600");    
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");    

And after them I'm enable ignoring the options request:

if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {    
   return 0;    
}    

This approach helped me handling the "post" and the "delete" embedded request methods from the Angular.

I added below in php and it solved my problem.

header("Access-Control-Allow-Origin: *");

header("Access-Control-Allow-Headers: Content-Type, origin");