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

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.

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

I added below in php and it solved my problem.

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

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

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.

来源：https://stackoverflow.com/questions/44479681/cors-php-response-to-preflight-request-doesnt-pass-am-allowing-origin

标签

php

angular

cors

preflight