Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery CORS request not working when sending Range request

I'm using jQuery's ajax call to make CORS request and its working if i set

var headers = {};

But since the content that i'm trying to get is rather big, i would like to send range headers.

(this is all tested and working in same domain)

So, when i do this:

var headers = {"Range":"bytes=" + start + "-" + end};


$.ajax({
    url:url,
    type:type,
    headers:headers,
    dataType:dataType,
    success:function (data, status, jqXHR) {

        //

    }, error:function (data, status, jqXHR) {

       //
    }
});

To our other domain, request gets canceled in latest chrome, and FF.

If i turn off headers, everything works, but then i get megabytes of data, and browser cant handle/parse that amount of data.

Here are headers from server (i control this, so i can edit it)

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: OPTIONS, GET, POST
Access-Control-Allow-Headers: Content-Type, Authorization, Accept, Range, Origin
Access-Control-Expose-Headers: Content-Range
Access-Control-Max-Age: 3600

Did i do something wrong, or sending range request over CORS is not yet implemented properly in latest browsers?

(Side note, also chrome is not returning headers even if i allow them in Expose-Headers, but that is known bug on chromium mailing list, but i can make one get request first to find out file size)

like image 457
kodisha Avatar asked Mar 22 '12 12:03

kodisha


1 Answers

I had similar problem while working on my last project. Here is what I did:

1) on server side handle OPTIONS request returning Access-Control headers like:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, OPTIONS
Access-Control-Max-Age: 1000
Access-Control-Allow-Headers: Origin, Content-Type, Accept

2) on server handle POST method and add header

Access-Control-Allow-Origin: *

3) in javascript:

jQuery.ajax({
        url: gate,
        type: "POST",
        data: JSON.stringify(post_data),
        contentType: "application/json; charset=UTF-8",
        crossDomain: true,
        success: function(data){
            //
        },
    });

Hope it will help

like image 96
Engrost Avatar answered Nov 18 '22 09:11

Engrost