Cross domain request stays in preflighted stage in firefox, opera but works in chrome

Question

I have one api server backed with Zend Framework 2 with ZfrCors module to enable Cross-Origin Resource Sharing.

The server side zfrcors config::

<?php

/**
 * This is the config file for ZfrCors. Just drop this file into your config/autoload folder (don't
 * forget to remove the .dist extension from the file), and configure it as you want
 */

return array(
    'zfr_cors' => array(
         /**
          * Set the list of allowed origins domain with protocol.
          */
        'allowed_origins' => array('http://client.server'),

         /**
          * Set the list of HTTP verbs.
          */
        'allowed_methods' => array('GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'),

         /**
          * Set the list of headers. This is returned in the preflight request to indicate
          * which HTTP headers can be used when making the actual request
          */
        'allowed_headers' => array('Authorization', 'Access-Control-Allow-Origin', 'content-Type', 'application/x-www-form-urlencoded', 'application/json', 'text/javascript', 'text/html'),

         /**
          * Set the max age of the preflight request in seconds. A non-zero max age means
          * that the preflight will be cached during this amount of time
          */
        'max_age' => 3600,

         /**
          * Set the list of exposed headers. This is a whitelist that authorize the browser
          * to access to some headers using the getResponseHeader() JavaScript method. Please
          * note that this feature is buggy and some browsers do not implement it correctly
          */
         // 'exposed_headers' => array(),

         /**
          * Standard CORS requests do not send or set any cookies by default. For this to work,
          * the client must set the XMLHttpRequest's "withCredentials" property to "true". For
          * this to work, you must set this option to true so that the server can serve
          * the proper response header.
          */
        'allowed_credentials' => true,
    ),
);

While on login in the client side(My client side application is ember.js), it sends request to the api.server domain (localhost) . But in firefox after preflight request nothing happens. It just gives me 200 OK status message and sits there. However if I run the client application in Chrome, it does gets passed from preflight stage to actual request that was made.

This is my Firefox inspect element result while sending a post credentials to another domain :

Access-Control-Allow-Cred...    true
Access-Control-Allow-Head...    Authorization, Access-Control-Allow-Origin, Content-Type, application/x-www-form-urlencoded
Access-Control-Allow-Meth...    GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Orig...    http://client.server
Access-Control-Max-Age  0
Connection  Keep-Alive
Content-Encoding    gzip
Content-Length  20
Content-Type    text/html
Date    Tue, 04 Mar 2014 08:38:29 GMT
Keep-Alive  timeout=5, max=100
Server  Apache/2.2.22 (Ubuntu)
Vary    Accept-Encoding
X-Powered-By    PHP/5.4.9-4ubuntu2.4

Request Headersview source
Accept  text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding gzip, deflate
Accept-Language en-US,en;q=0.5
Access-Control-Request-He...    content-type
Access-Control-Request-Me...    POST
Cache-Control   no-cache
Connection  keep-alive
DNT 1
Host    api.server
Origin  http://client.server
Pragma  no-cache
User-Agent  Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:27.0) Gecko/20100101 Firefox/27.0

The same request done in Chrome:

Preflight Stage:

Request URL:http://api.server/login
Request Method:OPTIONS
Status Code:200 OK

Request Headersview source
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:accept, content-type
Access-Control-Request-Method:POST
Connection:keep-alive
Host:api.server
Origin:http://client.server
Referer:http://client.server/signin
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.117 Safari/537.36

Response Headersview source
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:Authorization, Access-Control-Allow-Origin, Content-Type, application/x-www-form-urlencoded
Access-Control-Allow-Methods:GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Origin:http://client.server
Access-Control-Max-Age:0
Connection:Keep-Alive
Content-Encoding:gzip
Content-Length:20
Content-Type:text/html
Date:Mon, 03 Mar 2014 07:18:41 GMT
Keep-Alive:timeout=5, max=100
Server:Apache/2.2.22 (Ubuntu)
Vary:Accept-Encoding
X-Powered-By:PHP/5.4.9-4ubuntu2.4

The actual post request Headers:

Request URL:http://api.server/login
Request Method:POST
Status Code:200 OK

Request Headersview source
Accept:application/json, text/javascript, */*; q=0.01
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:55
Content-Type:application/json; charset=UTF-8
Host:54.254.23.183
Origin:http://client.server
Referer:http://client.server/signin
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.117 Safari/537.36
Request Payloadview source
{identity:pbehera, password:123, remember:true}
identity: "pbehera"
password: "123"
remember: true

Response Headersview source
Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin:http://client.server
Access-Control-Expose-Headers:
Connection:Keep-Alive
Content-Length:31
Content-Type:application/json; charset=utf-8
Date:Mon, 03 Mar 2014 07:18:42 GMT
Keep-Alive:timeout=5, max=99
Server:Apache/2.2.22 (Ubuntu)
Vary:Origin
X-Powered-By:PHP/5.4.9-4ubuntu2.4

What I am doing wrong ? Also same case with Opera as Firefox.

Answer 1

The header field Access-Control-Allow-Origin: differs between Firefox and Chrome. The URL specified by this field must match the domain (host + port) of the page that the javascript is running on, since you specified that you are sending credentials. This is probably not the case for the Firefox request for some reason.