如何将请求标头从跨域传递到WCF服务？

Question

From the caller site I will be having this code:

$.ajax({
    type: "GET",
    contentType: "application/json; charset=utf-8",
    beforeSend: function (xhr) {
        xhr.setRequestHeader("My-Key", '12345');
    },
    crossDomain: true,
    xhrFields: {
        withCredentials: true
    },
    url: "http://targetsite.com/services/myservice/mymethod",
    dataType: "json",
    success: function (response) {
    },
    error: function (message) {
    }
});

In the target site service I have the following code:

public override void ProcessRequest(ref RequestContext requestContext)
{
    var keys = (HttpRequestMessageProperty)
                  requestContext.RequestMessage.Properties[HttpRequestMessageProperty.Name];
    string apiKey = prop.Headers["My-Key"];// this is coming null always
}

I am getting apiKey null. Can you let me know what I am doing wrong here?

EDIT: I tried with this too in my target site Global.asax.cs Begin request event but no luck:

   //Enable Cross Domain WCF Configuration
    HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache);
    HttpContext.Current.Response.Cache.SetNoStore();
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
    string rqstMethod = HttpContext.Current.Request.Headers["Access-Control-Request-Method"];
    if (rqstMethod == "GET" || rqstMethod == "POST" || rqstMethod == "OPTIONS")
    {
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "My-Key,X-Requested-With, Accept");
        HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "3628800");
        HttpContext.Current.Response.AddHeader("type", "application/json; charset=utf-8");
        HttpContext.Current.Response.End();
    }

Answer 1

Sample JQuery $.ajax call for cross domain with adding a requestHeader

function TestingWCFRestWithJsonp() {
                    $.ajax({
                        url: "http://targetsite.com/services/myservice/mymethod",
                        dataType: "jsonp",
                        type: "GET",
                        beforeSend: function(xhr) { 
                                         xhr.setRequestHeader("My-Key", '12345');
                                   },
                        timeout: 10000,
                        jsonpCallback: "MyCallback",
                        success: function (data, textStatus, jqXHR) {
                            alert(data);
                        },
                        error: function (jqXHR, textStatus, errorThrown) {alert('error');

                        },
                        complete: function (jqXHR, textStatus) {alert('complete');
                        }
                    });
                }
                function MyCallback(data) {
                    alert(data);
                }

Answer 2

On your service, try adding a Access-Control-Allow-Origin header to the response. It specifies which sites are allowed to make cross-domain calls to your service.

Access-Control-Allow-Origin: http://foo.example

Where http://foo.example is the site making the request. You can also use wildcards for this. (Be careful with "Access-Control-Allow-Origin: *" !)