Enabling CORS in Chrome & FF for MSCRM Web API (Cross-Sub-Domain)

Question

I'm working on an application that will be hosted on a separate sub-domain from our MSCRM installation. In this application, I'm relying on CRM's WebAPI to complete several tasks such as retrieval and record creation. Everything works well in Internet Explorer, but I continue to get nasty errors in FireFox and Chrome. I've attempted a few different methods thus far including plain XHR, JQuery/Ajax, Iframe and Jsonp (both pre-built and manually). I did make sure to include the CORS header in the web config on the MSCRM server. It's also important to continue noting that this works in Internet Explorer already.

The error I receive from chrome is: XMLHttpRequest cannot load https://mycrm.mydomain/myorg/api/data/v8.0/new_entityname(00000000-0000-0000-0000-000000000000)?$select=new_fieldname,. Request header field Prefer is not allowed by Access-Control-Allow-Headers in preflight response.

In FireFox, I just don't receive any message. It simply doesn't work.

This is the function I'm currently using.

var Request = function (query, successCallback, errorCallback) {
            var _url = FormatString("{0}/{1}/api/data/v8.0/{2}", CrmConnection.BaseUrl, CrmConnection._org, query);

            var req = new XMLHttpRequest();
            req.open("GET", _url, true);
            req.setRequestHeader("OData-MaxVersion", "4.0");
            req.setRequestHeader("OData-Version", "4.0");
            req.setRequestHeader("Accept", "application/json");
            req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
            req.setRequestHeader("Prefer", "odata.include-annotations=\"*\"");
            req.onreadystatechange = function () {
                if (this.readyState === 4) {
                    req.onreadystatechange = null;
                    if (this.status === 200) {
                        var results = JSON.parse(this.response);
                        if (results["value"] || null != null)
                            successCallback(results.value);
                        else
                            successCallback(results);
                    }
                    else {
                        console.log("Begin Response Headers"); //
                        console.log(this.getAllResponseHeaders()); // Returns empty string
                        console.log("End Response Headers"); //
                        errorCallback(FormatString("XHRWAPI Error: '{0}';", this.statusText)); // The end result of this message is XHRWAPI Error: '' <-- It is also an empty string
                    }
                }
            };
            req.send();
        }

These are the headers that I added to the MSCRM installation's web.config.

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Content-Type" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, OPTIONS" />        
  </customHeaders>
</httpProtocol>

Even if I could get pointed in the right direction, any assistance is appreciated here.

Answer 1

As Jaromanda X stated, adding the missing headers was the solution. Just add the headers to your config file or IIS where applicable.