6

in my ajax call the responseHeader('Location') is FF always empty. Can anybody help me? By the way it is a CORS.

$.ajax({
                url: VIDEOS_UPLOAD_SERVICE_URL,
                method: 'POST',
                contentType: 'application/json',
                headers: {
                    Authorization: 'Bearer ' + accessToken,
                    'x-upload-content-length': file.size,
                    'x-upload-content-type': file.type
                },
                data: JSON.stringify(metadata)
            }).done(function(data, textStatus, jqXHR) {
                resumableUpload({
                    url: jqXHR.getResponseHeader('Location'),
                    file: file,
                    start: 0
                });
            });
2
  • 1
    You're saying this is only in FF? It seems like the server isn't setting the header. Can you include the server code?
    – Igor
    Mar 7, 2014 at 18:03
  • Yes, it is only in FF and it's a call to the YouTube-Server :-) Mar 7, 2014 at 18:18

2 Answers 2

8

You can fix this on the server site of the code by setting the headers:

Access-Control-Expose-Headers: Location

That will tell the firefox browser to allow the cross-domain reading of the Location: header.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS?redirectlocale=en-US&redirectslug=HTTP_access_control#Access-Control-Expose-Headers

2

Looks like it's a bug in Firefox/jQuery: http://bugs.jquery.com/ticket/11624

Looks like it may only affect certain versions of Firefox/jQuery, and there is a patch that may resolve it. From the bug tracker another solution was posted too:

define("jquery-cors-patch", ["jquery"], function ($) {

  // workaround for Firefox CORS bug - see http://bugs.jquery.com/ticket/10338

  var _super = $.ajaxSettings.xhr;
  $.ajaxSetup({
    xhr: function() {
      var xhr = _super();
      var getAllResponseHeaders = xhr.getAllResponseHeaders;
      xhr.getAllResponseHeaders = function() {
          var allHeaders = getAllResponseHeaders.call(xhr);
        if (allHeaders) {
            return allHeaders;
        }
        allHeaders = "";
        var concatHeader = function(i, header_name) {
          if (xhr.getResponseHeader(header_name)) {
            allHeaders += header_name + ": " + xhr.getResponseHeader( header_name ) + "\n";
          }
        };
        // simple headers (fixed set)
        $(["Cache-Control", "Content-Language", "Content-Type", "Expires", "Last-Modified", "Pragma"]).each(concatHeader);
        // non-simple headers (add more as required)
        $(["Location"] ).each(concatHeader);        
        return allHeaders;
      };
      return xhr;
    }
  });

});
5
  • Ok, where must I put this workaround? In the "done"-function? before? Mar 8, 2014 at 7:46
  • I believe you just need to put it somewhere before your AJAX call.
    – Igor
    Mar 8, 2014 at 16:06
  • Ah ok thx but when I put the call in a lightbox (fancybox) the lightbox is closing in FF after I clicked the submit button, but in other browser it works... Mar 9, 2014 at 7:45
  • But when I add an alert, then it works in FF and in the lightbox that is crazy Mar 9, 2014 at 8:14
  • @user2831042 That implies a race condition. Check to see if your code should be executing within a callback, perhaps.
    – Igor
    Mar 9, 2014 at 17:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.