title: Cross server File Upload in IE 8/9 for ASP.Net WebAPI
body: <p>I have read tons about File Upload for IE 8/9. However, I have not been able to successfully create any solution for my case. I am pretty new to programming for the web so this could stem from my lack of knowledge about protocols and such.</p>
  
  <p>On the server side I have ASP.NET WebApi: an API that is meant to handle file uploads, which works fine when using Fiddler and direct calls to that server.</p>
  
  <p>On the client I use HTML (not HTML 5), and KnockoutJS. </p>
  
  <p>Because of the architecture in place, there are 2 servers: one for serving clients and other misc. activities (lets call it A), and another which hosts the file upload API and manages large volumes of data (server B).</p>
  
  <p>I have a page on the client (coming from A) which uploads files to the 2nd server (server B).</p>
  
  <p>I came across jquery.form.js and read that it supports IE uploads as well. So I tried implementing the code from a <a href="http://www.rgvwebshop.com/2013/01/file-upload-with-knockoutjs-and-jquery" rel="nofollow">tutorial from some site</a>. Unfortunately it does not work and the browser shows the following error:</p>
  
  <pre class="lang-none prettyprint-override"><code>OPTIONS http://B/Files/Post/3/g/ 404 (Not found) jquery.js:8724
  send jquery.js:8724               jQuery.extend.ajax jquery.js:8154
  fileUploadXhr                                    jquery.form.js:321
  $.fn.ajaxSubmit                                  jquery.form.js:239
  (anonymous function)                              knockout.bindings.js:17
  jQuery.event.dispatch                            jquery.js:5116
  elemData.handle                                  jquery.js:4787
  OPTIONS http://B/Files/Post/3/g/ Origin http://A is not allowed by Access-Control-Allow-Origin.                         jquery.js:8724
  send jquery.js:8724                              jQuery.extend.ajax jquery.js:8154
  fileUploadXhr                                    jquery.form.js:321
  $.fn.ajaxSubmit                                  jquery.form.js:239
  (anonymous function)                           knockout.bindings.js:17
  jQuery.event.dispatch                            jquery.js:5116
  elemData.handle                                  jquery.js:4787
  XMLHttpRequest cannot load http://B/Files/Post/3/g/. Origin http://A is not allowed by Access-Control-Allow-Origin. test.html:1
  </code></pre>
  
  <p>On the servers I have implemented everything from <a href="http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api" rel="nofollow">this article</a>, which talks about CORS for WebApi's.</p>
  
  <p>Can anyone help? I am looking out for code snippets in HTML and javascript/jquery that does the trick for both IE 8/9 and other modern browsers.</p>