FineUploader - add authentication in header

Question

I'm using FineUploader 3.7 in cross domain uploading project. Everything is fine until I move the code to client's DEV server which has simple authentication. Is there a way to embed authentication information in the form when the preflight request is sent to the server?

I have tried to embed basic auth in headers, however not working. Please refer to the code below:

$.ajaxSetup({
    headers: {
        'Authorization': "Basic YZVjaGFmbWluOkNieWxjBTY3"
    },
    beforeSend: function (jqXHR, settings) {
        jqXHR.setRequestHeader('Authorization', 'Basic YZVjaGFmbWluOkNieWxjBTY3');
    }
});

And even more, I have tried to set the custom header and no luck:

var manualuploader = new qq.FineUploader({
  customHeaders: {
    'Authorization': 'Basic YXVjaGFkbWluOkNieWxjZTY3'
  },....

Affrica

Answer 1

Your customHeaders option isn't defined properly. customHeaders is a property of the request option, as detailed in the request option documentation.

Your Fine Uploader integration code should look like this instead:

var manualuploader = new qq.FineUploader({
    request: {
        endpoint: "path/to/your/server",
        customHeaders: {
            "Authorization": "Basic YXVjaGFkbWluOkNieWxjZTY3"
        }
    }
});

Also, please keep in mind that jQuery's ajaxSetup has no effect on Fine Uploader's ajax/xhr calls. Fine Uploader does not use jQuery at all internally. The optional jQuery plug-in offered by Fine Uploader simply wraps the native javascript library to allow it to be easily used as a jQuery plug-in by supporting syntax common associated with jQuery and jQuery plug-ins.

Also, please be aware that these headers will not be passed along with the upload request in IE9 and older, since IE9 and older do not support uploads via ajax/xhr. In those browsers, a form, targeting an iframe, is submitted. In the case of a form submit, there is no way to associate custom headers with the request.

Renzo

Hi Ray, thanks for your feedback, however it's still not working. As there are two requests during the file upload. The first "preflight" request failed with 401 authorization error. I have checked the header in Fiddler, there is no Authorization header in it. Did I miss something else? – Affrica

The preflight will not contain any custom headers. Fine Uploader has no control over this, that is just the way CORS works. If the preflight is handled correctly by your server, then the original request will be sent by the browser with the Authorization header. Your server should be set up to respond to preflight (OPTIONS) requests properly if you are working in a cross origin environment. – Renzo

Thank you very much Ray. Sorry for the delay response....One more issue about that preflight OPTIONS request, our client said that the http method "OPTIONS" is forbidden on their server. They ask us to remove this "OPTIONS" request. However, according to your last comment, I guess "OPTIONS" can't be removed in our CROS situation. Am i right? – Affrica

That is correct. In fact, we have no control over this. The browser MUST send OPTIONS for these types of cross origin requests. You will need to educate your client on CORS and let them know that their server MUST support OPTIONS if they want this to work in their cross origin environment. – Renzo