Firefox and Internet Explorer not sending POST request after receiving 200 OK after OPTIONS request - Works fine in Chrome

Question

I am working on a new service where I have a REST API built inside a C++ application. The C++ applications listens on a particular port and receives HTTP/S traffic, processes what is sent, and then send an HTTP response back.

The idea is that I will have different libraries that will be able to post REST API within the C++ API. I can be getting a request from any where and anything, so it could be another bit of software, via CURL for example, or a POST request from a browser.

The API is working until I was working on a library that would be used with Javascript to send the C++ API request via AJAX posts.

Because I am doing an AJAX post from one website to another domain I am having to make use of CORS. When I first started designing this I was using Chrome and I hit a problem that Chrome would send an HTTP OPTIONS request and I would respond with a 403 Method Not Allowed as I didn't know about this at the time. I looked into this and found what was needed and then got it working so Chrome would send the OPTIONS request, the C++ app would send a 200 OK, and Chrome would then subsequently send the actual AJAX POST.

This is fully working in Chrome, however, when testing in Internet Explorer, and Firefox the browser sends the OPTIONS, and the C++ app sends back a 200 OK but then neither of the browers send the actual POST request.

Below are the request headers and response headers from Chrome and Firefox.

Chrome Request Headers

Request URL: http://192.168.1.96:500/initialise
Request Method: OPTIONS

Remote Address: 192.168.1.96:500
Referrer Policy: no-referrer-when-downgrade
Provisional headers are shown
Access-Control-Request-Headers: authorisation-token,device_id,session_id
Access-Control-Request-Method: POST
Origin: http://localhost
User-Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Mobile Safari/537.36

Chrome Response Headers

    Access-Control-Allow-Headers: * 
    Access-Control-Allow-Methods: POST, OPTIONS 
    Access-Control-Allow-Origin: * 
    Access-Control-Expose-Headers: session_id 
    Allow: POST,OPTIONS 
    Content-Length: 0 
    Content-Type: application/json
    Status Code: 200 OK

Firefox Request Headers

Accept: text/html,application/xhtml+xm…plication/xml;q=0.9,*/*;q=0.8
Accept-Encoding gzip, deflate
Accept-Language: en-GB,en;q=0.5
Access-Control-Request-Headers: authorisation-token,device_id,session_id
Access-Control-Request-Method: POST
Connection: keep-alive
Host: 192.168.1.96:500
Origin: http://localhost
Referer: http://localhost/_js/
User-Agent: Mozilla/5.0 (Windows NT 10.0; …) Gecko/20100101 Firefox/64.0
Request URL:http://192.168.1.96:500/initialise
Request method:OPTIONS
Remote address:192.168.1.96:500

Firefox Response Headers

Access-Control-Allow-Headers: *
Access-Control-Allow-Methods: POST, OPTIONS
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: session_id
Allow: POST,OPTIONS
Content-Length: 0
Content-Type: application/json
Status code:200

For reference below is how I am doing the ajax request:

var url = "http://192.168.1.96:500/";
        url += api_endpoint;

        $.ajax({
            type: "POST",
            url: url,
            async: true,
            headers: {
                "authorisation-token": app.api_key,
                "session_id": app.cookie,
                "device_id": app.device_id
            },
            data: postArray,
            crossDomain: true,
            success: function(object, status, xhr){
                if (api_endpoint === "initialise")
                {
                    app.cookie = xhr.getResponseHeader("session_id");
                    setCookie("session_id", app.cookie, true);
                }
                if (callbackResult !== null)
                {
                    callbackResult(object);
                }
            },
            error: function(xhr)
            {
                console.error("Status: " + xhr.status);
                console.error("Status Text:" + xhr.statusText);
                console.error("Response Text: " + xhr.responseText);
                if (callbackResult !== null)
                {
                    callbackResult(xhr);
                }
            }
        });

I am using Jquery to perform the ajax post.

Can anyone see why in this case Firefox wouldn't be sending the actual request after the 200 OK, the request and the response looks to be the same and this works perfectly in Google Chrome.

Answer 1

I've figured out thanks to @Manoj Purohit comment to check the console again. I did that and found there were warnings which had been filtered, I had to add the following header to make it work in Firefox and Internet - odd though that it was accepted in Chrome.

this->addHeader("Access-Control-Allow-Headers", "authorisation-token, device_id, session_id");