CORS request is not sending cookies

CORS request is not sending cookies

Hello,

I have posted this question to different forums but didn't get a single answer. So, will try here.

I use blueimp/jQuery-File-Upload script for cross domain (subdomain) uploads. The main page is www.example.com and I upload files to st2.example.com.

Everything works fine but the problem is that I need to send cookies with each request and for some reason it's not possible. Cookies are being sent only with HEAD requests. The documentation of this script says:


If you need to send along cookies (e.g. for authentication), set the withCredentials $.ajax() setting as fileupload widget option:



  1. $('#fileupload').fileupload('option', {
  2. xhrFields: {
  3. withCredentials: true
  4. }
  5. });

This does not work for me. I tried to add the line

  1. withCredentials: true

in three different places:

  1. to $('#fileupload').fileupload({
  2. to $('#fileupload').fileupload('option', {
  3. to $.ajax({

First 2 does not work at all. The third works only for HEAD requests. HEAD requests send cookies but OPTIONS and POST not. I checked this in browser console in Firefox and Chrome.

My question is: where is the problem that OPTIONS and POST requests does not send any cookies?

Below is my script. This example contains "withCredentials: true" in all 3 places where I have tested it.

  1.     <script>
  2.     var defaultthumbnail = '<img class="thum5" src="/upload.png">';
  3.     $(function () {
  4.     var formData = $('#fileupload').serializeArray();
  5.     'use strict';
  6.     $('#fileupload').fileupload({
  7. xhrFields: {withCredentials: true},
  8.     url:'//st2.example.com/',
  9.     });
  10.     $('#fileupload').fileupload('option', {
  11.     acceptFileTypes: /(\.|\/)(jpe?g)$/i,
  12.     autoUpload:true,
  13.     maxNumberOfFiles:20,
  14.     maxFileSize:4000000,
  15.   xhrFields: {withCredentials: true},
  16.     disableImageResize: /Android(?!.*Chrome)|Opera/
  17.     .test(window.navigator.userAgent)
  18.     });
  19.     if ($.support.cors) {
  20.     $.ajax({
  21. xhrFields: {withCredentials: true},
  22.     url: $('#fileupload').fileupload('option', 'url'),
  23.     type: 'HEAD'
  24.     }).fail(function () {
  25.     $('<div class="error"/>')
  26.     .text('Server is not available')
  27.     .appendTo('#fileupload');
  28.     });
  29.     }
  30.     });
  31.     </script>
   
File on st2.example.com contains:
   
  1. header('Access-Control-Allow-Origin: http://www.example.com');
  2. header("Access-Control-Allow-Credentials: true");
  3. header('Access-Control-Allow-Methods: HEAD, GET, PUT, POST, OPTIONS');
  4. header('Access-Control-Allow-Headers: Content-Type, Content-Range, Content-Disposition, Content-Description');