HTTP POST request from browser to another server

Question

I am trying to achieve this http://wiki.kolmisoft.com/index.php/MOR_API_login . I have enabled the settings in my server to allow API. The problem Javascript having is, my main website runs under domain website.com whereas the asterisk servers runs in voip.website.com. So when I try to invoke the url using jQuery, I get XMLHttpRequest cannot load http://voip.website.com/.../.../..... Origin http://sites is not allowed by Access-Control-Allow-Origin.

Am not sure what is the best way to achieve this. Any points will be of great help.

Answer 1

All browsers enforce the same-origin policy which includes the entire host (website.com vs. voip.website.com). You cannot process the JSON returned from an Ajax post unless the hosts are the same.

There is a workaround called JSONP. The trick is that you wrap the reply in a JavaScript function. You see, the same-origin policy only applies to data, not full-blown scripts themselves. So if the response is JavaScript instead of data, the browser thinks you need this script to run.

For example, say your response was going to be this JSON:

{
  firstName: 'Abed',
  lastName: 'Nadir',
  school: 'Greendale Community College'
}

Instead, you respond with this:

({
  firstName: 'Abed',
  lastName: 'Nadir',
  school: 'Greendale Community College'
})

The thing to note is that the parentheses before and after make it a JavaScript anonymous function rather than JSON data. All you do is receive that response and strip off the JavaScript code before and after.

Sound kludgey? It is, but everyone does it including Flickr, Google, Amazon, Facebook, and on and on.