title: jquery.form and cross-domain requests for file upload
body: <p>I'm trying to make a cross domain file upload form work using jquery form plugin, but I keep getting the following error in firebug console:</p>
  
  <pre><code>Permission denied to access property 'document'
  </code></pre>
  
  <p>It happens on the following line of jquery.form plugin</p>
  
  <pre><code>403: var doc = frame.contentWindow ? frame.contentWindow.document : frame.contentDocument ? frame.contentDocument : frame.document;
  </code></pre>
  
  <p>And If I use safari, I get this error:</p>
  
  <pre><code>Unsafe JavaScript attempt to access frame with URL http://s1.test-host/index.php/upload/start?is-async=1 from frame with URL http://test-host/index.php/main/. Domains, protocols and ports must match.
  </code></pre>
  
  <p>The html for the for looks like this:</p>
  
  <pre><code>  &lt;form action="http://s1.test-host//index.php/upload/start" method="post" accept-charset="utf-8" id="upload-form" enctype="multipart/form-data"&gt;
      &lt;input type="hidden" name="MAX_FILE_SIZE" value="1204000"  /&gt;
        &lt;label for="file-input"&gt;Input File&lt;/label&gt;
        &lt;input type="file" name="file" value="" id="file-input" alt="Input File"  /&gt;
        &lt;input type="submit" name="upload" value="Convert" id="start-upload" /&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p>The javascript looks like this:</p>
  
  <pre><code>$(this).ajaxForm ({
      beforeSubmit: onFileFormSubmit,     // pre-submit callback
      success:      onFileFormSubmitEnd,  // post-submit callback
      resetForm:    true,             // reset the form after successful submit
      dataType:     'json',           // force response type to JSON
      iframe:       true              // force the form to be submitted using an iframe
  });
  </code></pre>
  
  <p>The target php page has this:</p>
  
  <pre><code>    if ($_SERVER['HTTP_ORIGIN']) {
          header('Access-Control-Allow-Origin: *');
          header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
          header('Access-Control-Max-Age: 1000');
          header('Access-Control-Allow-Headers: Content-Type');
      }
     ... // Usual upload handling code
  </code></pre>
  
  <p>But nothing seems to be working. I've even tried to change 'dataType' to 'jsonp' and also changed to form mothod from 'post' to 'get' but all that is to no avail, I still keep getting the same error. If I look at the server the file does actually get uploaded but javascript is not able to call the success function.</p>
  
  <p>After googling I've found that there could be other solutions like 'JQuery File Upload' or 'plupload' but I really need something simple I don't want to use HTML5 features.</p>