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

We need to reply which methods our server can process without any response. Just add it at the top of your php and everything will work:

if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');
    header("Access-Control-Allow-Headers: $_SERVER[HTTP_ACCESS_CONTROL_REQUEST_HEADERS]");
    header("Content-Length: 0");
    header("Content-Type: text/plain");
    exit;
}

https://www.rfc-editor.org/rfc/rfc9110.html#section-9.3.7

9.3.7. OPTIONS The OPTIONS method requests information about the communication options available for the target resource, at either the origin server or an intervening intermediary. This method allows a client to determine the options and/or requirements associated with a resource, or the capabilities of a server, without implying a resource action.

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.

Answer 3

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 4

I had a similar issue,

Dev environment: Apache web server behind NginX Proxy

My app is in a virtual host in my Apache server, configured with name: appname.devdomain.com

When accessing to web app internaly I wasn´t getting through the proxy: I was using the url: appname.devdomain.com

I had no problem this way.

But, when accessing it externally using public url: appname.prddomain.com it would load, even got access to the system after login, then load the templates and some session content, then, if an asynchronous call would be made by the client then I would got the following message in chrome console:

"Access to XMLHttpRequest at 'http://appname.devdomain.com/miAdminPanel.php' from origin 'http://appname.prddomain.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request."

To test this I opened two tabs

1st tab accessed the web using url: appname.devdomain.com, made XMLHttpRequest -> OK

2nd tab accessed the web using url: appname.prddomain.com, made XMLHttpRequest -> CORS error message above.

So, after changing the Nginx proxy configuration:

server {
    listen      80;
    server_name appname.prddomain.com;

    # SSL log files ###
    access_log      /path/to/acces-log.log;
    error_log       /path/to/error-log.log;

location / {
    proxy_pass  http://appname.devdomain.com;
    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Server $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

basically this tells the proxy to treat the external request as internal request.

Answer 5

I added below in php and it solved my problem.

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

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