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

Question

So I know there's a lot of CORS posts out there, and I'm just adding to them, but I can't find any with answers that help me out. So I'm building an angular 4 application that relies on my php api. Working locally it's fine, the moment I toss it up on the domain with the app at app.example.com, and the api at api.example.com, I can't get past my login, because I get the following error:

XMLHttpRequest cannot load http://api.example.com/Account/Login. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://app.example.com' is therefore not allowed access.

My php code looks like this:

$http_origin = $_SERVER['HTTP_ORIGIN'];

$allowed_domains = array(
    'http://example.com',
    'https://example.com',
    'http://app.example.com',
    'https://app.example.com',
    'http://www.example.com',
    'https://www.example.com'
);

if (in_array(strtolower($http_origin), $allowed_domains))
{  
    // header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Origin: $http_origin");
    header('Access-Control-Allow-Credentials: true');
    header('Access-Control-Max-Age: 86400');
}

// Access-Control headers are received during OPTIONS requests
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
        header("Access-Control-Allow-Headers: Authorization, Content-Type,Accept, Origin");
    exit(0);
}

My Angular post looks like this:

public login(login: Login): Observable<LoginResponse> {
    let headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    headers.append('Authorization', 'Basic ' + btoa(login.Username + ':' + login.Password));
    return  this.http.post(this.apiBaseUrl + '/Account/Login', "grant_type=client_credentials", { headers: headers })
        .map(response => {
            // code
        });
}

If I run the request through postman, which doesn't bother with CORS, I get:

{ "error": "invalid_client", "error_description": "Client credentials were not found in the headers or body" }

I've tried setting origin to '*' just to test and see if that was the core of the issue, and it still fails the same way.

Edit Just updating from information below. Changing casing in headers had no effect, and pulling the code out of their if statements had no effect.

I debugged the php by telling my live app to go to my local api, and the php is working as expected. It's setting the headers and making it into each of the if statements.

Edit take 2 I could really use some help on this one, if someone has any ideas, I'd really appreciate it.

Edit take 3 If I set all the header stuff in my .htaccess rather than my php, it lets me through. However, now I'm stuck on the error listed above that I always get when using postman, however now it's while using the actual site.

{"error":"invalid_client","error_description":"Client credentials were not found in the headers or body"}

My response headers are like so

Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:authorization, content-type, accept, origin
Access-Control-Allow-Methods:GET, POST, OPTIONS
Access-Control-Allow-Origin:*

I'll be changing it from * to only my domains once I have it working. But for now i'll leave it as *.

My headers as requested.

Answer 1

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

Answer 2

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.