CORS, ASP.NET Web API, Kendo UI

[Wong]

I have the following scenario:An ASP.NET Web API project (hosted at localhost:8081) which calls my BLL to implement business logicAn ASP.NET MVC4 project (hosted at localhost:8080) which will form my web layerFuture plans to add projects for Mobile etcI followed the steps to setup a CORS structure to allow cross-domain ajax requests as defined in this articleI have an API service to return "somelist" from the database. when I do a simple request through Fiddler I get the right response from the serverRequest: 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" }}Response: 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}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 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" }}) });1st Request: for some reason it shows OPTIONS call instead of POST 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.31st Response: 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: 02nd Request: 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" }}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 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"}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 sentCode: 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" }Request: JSON.stringify sends weird data 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