ajax POST call to webAPI on different domain

Question

I've read many of the "solutions" about 'POST requests on different domain' issue which is also known as 'Cross domain post', and still I cant make that works like they are saying that they fixed it.

From reading all of those articles about this issue I know now why that's happening, but I still need it to work in my project, in the secure way without using hack moves or such things. I would like if anyone knows how to make it works, to help us out, I mean 'us' because I believe that still there are people who didn't make it up.

My situation: I have webapp which is hosted on domainA, that makes ajax post call to domainB(mvc4 webAPI). ajax post call looks like this:

var profile = { Id:"1234567890", Name:"Name_01"}
$.ajax({
  type: "POST",
  url: 'http://domainB/api/Profile',
  data: JSON.stringify(profile)
});

@domainB I used to set custom response headers:

<system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*"/>
        <add name="Access-Control-Allow-Headers" value="X-Requested-With" />
        <add name="Access-Control-Allow-Methods" value="POST, GET, OPTIONS"/>
      </customHeaders>
    </httpProtocol>
</system.webServer>

@domainB webAPI post method I have this:

public void Post(dynamic newProfile)
{
...
}

So on activated/started ajax call, in debugging mode at webAPI project I am getting SerializationException Operation could destabilize the runtime at JsonFX.Serilization.DataWriter in the webAPI, and as an error at browser I get

XMLHttpRequest cannot load http://domainA/api/Profile. Origin http://domainB is not allowed by Access-Control-Allow-Origin.

I am catching the requests and responds on Fiddler and I see that there are no Access-Control-Allow headers at all on the response side.

I wrote what I am using, now because this isn't worked out what should I do to make it happened that ajax post call working from domainA to domainB, or what is the real solution for this.

Answer 1

Rather than try to rely on various available scripts/workarounds to perform cross-domain calls why not create a web method on your own domain.

You can call this with your AJAX.

Then let your own web method perform the call to the other domain - this isn't subject to the same security issues as having your browser perform the call.

So your call would go something like this:

Browser AJAX Call --> Your own web method --> call to other domain service --> result returned to your method --> Your method returns back to your browser.

Answer 2

Sounds like it might be a problem with CORS preflight requests. Try to read about that in: http://www.html5rocks.com/en/tutorials/cors/ , http://remysharp.com/2011/04/21/getting-cors-working/ and http://www.w3.org/TR/cors/

Anyway... In case of non-simple AJAX requests, the browser first makes an OPTIONS request to your URL, which you need to handle and return the expected result. If the OPTIONS response is OK with the browser, it then sends the actual POST request you wanted it to send in the first place. So, if you only have a handler for POST and not for OPTIONS (on your server), then you might not be handling the preflight request (OPTIONS) correctly and everything falls apart.