Call ASP Web API Cross Domain using jQuery Ajax

I have an ASP Web API application that works fine using a web browser cross domain. It returns all expected data in JSON which I can clearly see in Firefox and in Fiddler. For example, using Firefox:

http://mywebapidomain.com/api/drink/

returns:

<ArrayOfDrink>
    <Drink>
        <AlcoholContent>0.05</AlcoholContent>
        <Id>1</Id>
        <Name>12 oz beer</Name>
        <OuncesPerDrink>12</OuncesPerDrink>
    </Drink>
    <Drink>
        <AlcoholContent>0.12</AlcoholContent>
        <Id>2</Id>
        <Name>Glass wine</Name>
        <OuncesPerDrink>5</OuncesPerDrink>
    </Drink>
</ArrayOfDrink>

I can see similar success using Fiddler. Up until now I have had a page that resided on the Web API domain and used jQuery to make the call, like this:

// AJAX Call - Get Drink Types
function getDrinkTypes() {

    return $.ajax({
        type: "GET",
        contentType: "application/json; charset=utf-8",
        url: "http://mywebapidomain.com/api/drink/",
        dataType: "json",

        success: function (data) {
            DrinkTypeList = data;
        },

        error: function (xhr, status, error) {
            alert(xhr.statusText + " - " + xhr.status + "\n\n" + xhr.responseText);
        }
    });
}

Again, this worked fine and returned all expected data.

Without getting into a whole other issue here, I had a sound reason to place the above jQuery code in a script on an entirely different server/domain. Now the Ajax call fails. Upon inspecting xhr, status and error, I am seeing the following:

xhr.readyState = 4
xhr.status = 404
xhr.statusMessage = "undefined"

status = "error"

error = ""

Viewing with Fiddler, I see the raw request:

OPTIONS http://mywebapidomain.com/api/drink/ HTTP/1.1
Accept: */*
Origin: http://localhost:65103
Access-Control-Request-Method: GET
Access-Control-Request-Headers: content-type, accept
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0; Touch)
Host: mywebapidomain.com
Content-Length: 0
DNT: 1
Connection: Keep-Alive
Pragma: no-cache

The response:

HTTP/1.1 200 OK
Cache-Control: no-cache
Pragma: no-cache
Expires: -1
Server: Microsoft-IIS/8.0
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Date: Thu, 23 Jan 2014 08:48:57 GMT
Content-Length: 0

I do not have CORS or JSONP support configured on the ASP/MVC4 Web API domain.

Earlier on in this project I ran into this issue and did some research. I read that jQuery Ajax makes an initial call that web browsers do not. I have totally forgotten what this is called, but it is evident by the OPTIONS in the above raw request header from Fiddler. Since I didn't understand it, I opted to run the client jQuery on the same domain and include it in an iframe on the alternate domain. This had its own complications, and so I am back t squaring off with this issue.

There are a lot of articles related to this problem, but I have been unable to make sense of them. I just don't know how to handle this. :S

As I have been typing this question I am seeing many similar questions that have already been asked. I've opened them in a separate window and read through each one, but none of them seem to be helping me understand what I have to do...

Can someone point me specifically on how to resolve this cross domain jQuery Ajax issue?