title: CORS, ASP.NET Web API, Kendo UI
body: <p>I have the following scenario:</p>
  
  <ul>
  <li>An ASP.NET Web API project (hosted at localhost:8081) which calls my BLL to implement business logic</li>
  <li>An ASP.NET MVC4 project (hosted at localhost:8080) which will form my web layer</li>
  <li>Future plans to add projects for Mobile etc</li>
  <li>I followed the steps to setup a CORS structure to allow cross-domain ajax requests as defined in <a href="http://blogs.msdn.com/b/carlosfigueira/archive/2012/02/20/implementing-cors-support-in-asp-net-web-apis.aspx" rel="nofollow">this article</a></li>
  </ul>
  
  <p>I have an API service to return "somelist" from the database. </p>
  
  <ul>
  <li><strong>when I do a simple request through Fiddler I get the right response from the server</strong></li>
  </ul>
  
  <p>Request:</p>
  
  <pre><code> 
      POST http://localhost:8081/api/orgs/getsomelist HTTP/1.1
      User-Agent: Fiddler
      Content-type: application/json
      Host: localhost:8081
      Content-Length: 158
  
      {"token": "sometoken","kValues": { "userId": "1.0" }}
  </code></pre>
  
  <p>Response:</p>
  
  <pre><code>
      HTTP/1.1 200 OK
      Cache-Control: no-cache
      Pragma: no-cache
      Content-Type: application/json; charset=utf-8
      Expires: -1
      Server: Microsoft-IIS/8.0
      X-AspNet-Version: 4.0.30319
      X-SourceFiles: =?UTF-8?B?WjpcRG9jdW1lbnRzXGNvZGVcSnNyZWVcSnNyZWVcSnNyZWUuQXBpXGFwaVxvcmdzXGdldG15b3Jncw==?=
      X-Powered-By: ASP.NET
      Date: Thu, 13 Dec 2012 22:15:34 GMT
      Content-Length: 315
  
      {successful JSON response}
  </code></pre>
  
  <ul>
  <li><strong>when I do the same thing from by web application (on localhost:8080) using a simple ajax POST call, Fiddler shows 2 requests made, 1 returns 200 success and the other 500 internal server</strong></li>
  </ul>
  
  <pre><code>
      Code:
      $.ajax({
          type: "POST",
          contentType: "application/json; charset=utf-8;",
          crossDomain: true,
          url: "@urlToConnect",
          withCredentials: true,
          dataType: "json",
          data: JSON.stringify({token: "sometoken",kValues: { userId: "1.0" }})
      });
  </code></pre>
  
  <p>1st Request: for some reason it shows OPTIONS call instead of POST</p>
  
  <pre><code>
      OPTIONS http://localhost:8081/api/orgs/getsomelist HTTP/1.1
      Host: localhost:8081
      Connection: keep-alive
      Access-Control-Request-Method: POST
      Origin: http://localhost:8080
      User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.97 Safari/537.11
      Access-Control-Request-Headers: origin, content-type, accept
      Accept: */*
      Referer: http://localhost:8080/
      Accept-Encoding: gzip,deflate,sdch
      Accept-Language: en-US,en;q=0.8
      Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3
  </code></pre>
  
  <p>1st Response:</p>
  
  <pre><code>
      HTTP/1.1 200 OK
      Cache-Control: no-cache
      Pragma: no-cache
      Expires: -1
      Server: Microsoft-IIS/8.0
      Access-Control-Allow-Origin: http://localhost:8080
      Access-Control-Allow-Methods: POST
      Access-Control-Allow-Headers: origin, content-type, accept
      X-AspNet-Version: 4.0.30319
      X-SourceFiles: =?UTF-8?B?WjpcRG9jdW1lbnRzXGNvZGVcSnNyZWVcSnNyZWVcSnNyZWUuQXBpXGFwaVxvcmdzXGdldG15b3Jncw==?=
      X-Powered-By: ASP.NET
      Date: Thu, 13 Dec 2012 22:15:16 GMT
      Content-Length: 0
  </code></pre>
  
  <p>2nd Request:</p>
  
  <pre><code>
      POST http://localhost:8081/api/orgs/getsomelist HTTP/1.1
      Host: localhost:8081
      Connection: keep-alive
      Content-Length: 127
      Origin: http://localhost:8080
      User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.97 Safari/537.11
      Content-Type: application/json; charset=UTF-8;
      Accept: application/json, text/javascript, */*; q=0.01
      Referer: http://localhost:8080/
      Accept-Encoding: gzip,deflate,sdch
      Accept-Language: en-US,en;q=0.8
      Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3
  
      {"token": "sometoken","kValues": { "userId": "1.0" }}
  </code></pre>
  
  <p>2nd Response: my Web API method is not able to get the POSTed JSON data right. I do not get this exception with the same data when POSTed directly on Fiddler in example 1 above</p>
  
  <pre><code>
      HTTP/1.1 500 Internal Server Error
      Cache-Control: no-cache
      Pragma: no-cache
      Content-Type: application/json; charset=utf-8
      Expires: -1
      Server: Microsoft-IIS/8.0
      Access-Control-Allow-Origin: http://localhost:8080
      X-AspNet-Version: 4.0.30319
      X-SourceFiles: =?UTF-8?B?WjpcRG9jdW1lbnRzXGNvZGVcSnNyZWVcSnNyZWVcSnNyZWUuQXBpXGFwaVxvcmdzXGdldG15b3Jncw==?=
      X-Powered-By: ASP.NET
      Date: Thu, 13 Dec 2012 22:15:16 GMT
      Content-Length: 906
  
      {"Message":"An error has occurred.","ExceptionMessage":"some .NET exception"}
  </code></pre>
  
  <ul>
  <li><strong>When I do the same thing using kendoui datasource, I get the same 2 errors, but my request on fiddler shows garbage data, not the JSON I sent</strong></li>
  </ul>
  
  <pre><code>
  Code:
      dataSource: new kendo.data.DataSource({
              transport: {
                  read: {
                      type: "POST",
                      contentType: "application/json; charset=utf-8;",
                      crossDomain:true,
                      url: "@urlToConnect",
                      withCredentials: true,
                      dataType: "json",
                      data: JSON.stringify({token: "sometoken",kValues: { userId: "1.0" }})
                  }
              },
              schema: {
                  data: "data",
                  type: "json",
                  total: "count"
              }
  </code></pre>
  
  <p>Request: JSON.stringify sends weird data</p>
  
  <pre><code>
      POST http://localhost:8081/orgs/somelist HTTP/1.1
      Host: localhost:8081
      Connection: keep-alive
      Content-Length: 705
      Cache-Control: max-age=0
      Origin: http://localhost:8080
      User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.97 Safari/537.11
      Content-Type: application/json; charset=UTF-8;
      Accept: application/json, text/javascript, */*; q=0.01
      Referer: http://localhost:8080/
      Accept-Encoding: gzip,deflate,sdch
      Accept-Language: en-US,en;q=0.8
      Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3
  
      0=%7B&1=%22&2=t&3=o&4=k&5=e&6=n&7=%22&8=%3A&9=%22&10=1&11=F&12=V&13=R&14=A&15=I&16=1&17=E&18=b&19=7&20=%2F&21=%2F&22=M&23=7&24=U&25=A&26=Y&27=h&28=q&29=9&30=i&31=R&32=Z&33=U&34=%2F&35=Y&36=j&37=l&38=o&39=0&40=Q&41=5&42=Z&43=g&44=A&45=H&46=8&47=4&48=%2F&49=5&50=b&51=E&52=g&53=Z&54=F&55=M&56=%2B&57=p&58=Q&59=j&60=0&61=x&62=4&63=w&64=Z&65=6&66=W&67=c&68=T&69=M&70=u&71=Q&72=n&73=K&74=3&75=P&76=x&77=e&78=T&79=C&80=%2F&81=0&82=K&83=K&84=W&85=1&86=w&87=o&88=5&89=2&90=%2B&91=d&92=V&93=R&94=v&95=A&96=%3D&97=%3D&98=%22&99=%2C&100=%22&101=k&102=V&103=a&104=l&105=u&106=e&107=s&108=%22&109=%3A&110=%7B&111=%22&112=u&113=s&114=e&115=r&116=I&117=d&118=%22&119=%3A&120=%22&121=1&122=.&123=0&124=%22&125=%7D&126=%7D
  </code></pre>
  
  <p>I am not sure why the setup doesn't work when I do an ajax call directly or from kendoui datasource</p>