CORS exception while making ajax call from portal which is running in base domain to a service which is running in child domain

Question

I have a setup where I have one base domain and multiple child domains.

For example,

• My base domain is jing.xxxxx.com
• My child domain is rei.la.ca.jing.xxxxx.com.

As per one of my use case I need to access a service that is running in my child domain from the portal which is running in the base domain.

That is,

• My portal is running in jing.xxxxx.com
• Service named MiDAS is running in rei.la.ca.jing.xxxxx.com

While trying to trigger a JQuery ajax, I am receiving a CORS exception as below.

Access to XMLHttpRequest at 'https://rei.la.ca.jing.xxxxx.com/MiDAS/UPDATE' from origin 'https://jing.xxxxx.com' has been blocked by CORS policy: Reuest header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response

below is the code that I tried.

return new Promise((resolve, reject) => {
    let url = url_midasService + "UPDATE";
    let finalSettings = {};
    finalSettings.url = url;

    finalSettings.success = function (msg) {
        console.log("SUCCESS::" + url);
        resolve(msg);
    };

    finalSettings.error = function (jqXHR) {
        console.log("FAILURE::" + url);
        reject(jqXHR.status);
    };
    finalSettings.type = "PUT";
    finalSettings.data = JSON.stringify(payload);
    finalSettings.contentType = "application/json";
    finalSettings.crossDomain = true;
    finalSettings.headers = {
        'Access-Control-Allow-Origin': '*'
    };
    finalSettings.xhrFields = {
        withCredentials: true
    };

    $.ajax(finalSettings);
});

Below are few extra information :

• If I start chrome browser by disabling the security then the exception is not happening.
• But as you know disabling chrome security in client machine is not at all an option.
• Call is blocked at the browser itself and it is not at all reaching my services

Thanks in advance :-)