Custom Header not working

Hi,

I am trying to send an cross domain ajax request and add a custom header.
I found many examples and tutorials and they all worked fine. However when I put it into my own script the cross domain call worked except the custom header isn't showing

This is what I have
js

$(document).ajaxSend(function (event, jqxhr, settings) {
       
        var key = localStorage.getItem('SecurityKey');
   
        if (!key) {
            key = '';
        }
       
        if (key !== '') {
                 jqxhr.setRequestHeader('Security-Key', key);
        }
    });


function ajax_data(type,url, success) {
    $.ajax({
        type:type,
        url:url,
        dataType:"json",
        restful:true,
        cache:false,
        timeout:20000,
        async:true,
   
        beforeSend :function(data) {
        },
        success:function(data){
            success.call(this, data);
        },
        error:function(data){
            alert("Error In Connecting 2");
        }
    });
}

Code (markup):

beginning of php file

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

    header('Access-Control-Allow-Methods: GET, POST, OPTIONS');

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

Code (markup):

Now there are no js errors etc. All looks like it should be except I can't see the header in the ajax request ( I am testing this via chrome developer console )

Can anyone spot what I am doing wrong?