带有jQuery的Ajax跨域请求

Question

I trying to make a call to an external domain using $.ajax() and it WORKS, the server receives the call, but the response in firebug errors out in jquery.js line 7760. I've been beating my head at this all day and don't feel like I've made it much further.

$.ajax({
            type: "GET",
            url: "http://admin:asdfg@149.50.143.241:81/stream.jpg",
            //data: {},
            //async: true,
            //contentType: "application/jsonp; charset=utf-8",
            //headers: {
            //    'User-Agent': 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.46 Safari/536.5',
            //    'Accept': '*/*',
            //    'Authorization': 'Basic ' + auth
            //},
            //timeout: 500,
            dataType: "jsonp",
            //crossDomain: true,
            beforeSend: function (req) {
                req.setRequestHeader('User-Agent', 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.46 Safari/536.5');
                req.setRequestHeader('Accept', '*/*');
                req.setRequestHeader('Authorization', 'Basic ' + auth);
            },
            success: function (data) {
                alert("Success");
            }
        });

Answer 1

A jsonp response must be wrapped inside a javascript method call. (Callback method).

Assuming the response is an image. It looks unlikely that jquery will be able to handle it.

Answer 2

I do not know if you can use the ajax call to call an image.

When you use jsonp the beforeSend at ajax call is ignored.

Maybe you have to make your server aware and responsive to CORS.

Something like this:

    protected override void OnStartProcessingRequest(ProcessRequestArgs args)
    {
        HttpContext context = HttpContext.Current;    // set cache policy to this page 

        context.Response.AddHeader("Access-Control-Allow-Origin", "*");
        if (context.Request.HttpMethod == "OPTIONS")
        {
            context.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
            context.Response.AddHeader("Access-Control-Allow-Headers", "X-Requested-With, Accept");
            context.Response.AddHeader("Access-Control-Max-Age", "3628800");
            context.Response.AddHeader("type", "application/json; charset=utf-8");
            context.Response.End();
        }
    }

and use the XDomainRequest and XMLHttpResquest to make the call at client side.

take a look here: http://andre-pedroso.blogspot.pt/2011/02/javascript-consume-service-with-cross.html

Cheers