JSONP and CORS are two different things altogether.
JSONP
JSON with Padding is merely a hack taking advantage of the fact that there's no same origin policy restriction when downloading javascript files. As you can download only scripts, we make use of built-in data format JSON instead of XML or HTML. Also you can make only GET requests with JSONP because all it does is create a script with src set to some other domain and append it to your DOM, once it's downloaded, it is executed and that is when our callback is used to call code from original domain passing JSON object.
CORS
Cross-origin resource sharing is a standard from W3C that allows many resources (e.g. fonts, JavaScript, etc.) on a web page to be requested from another domain. You're not limited to using just GET, you can use all the usual HTTP methods like POST, HEAD, PUT , DELETE and others
How can you make a CORS request :
It's as simple as changing the url in your AJAX call to some other domain, that's it no other changes from client side.
If your browser supports CORS, then based on the type of request (simple/complex), a pre-flight OPTIONS request might be fired to get information about what type of methods & content-types are allowed for this domain and this OPTIONS response will be cached.
Going forward, whenever you make an AJAX call to some other domain, Behind the scenes, browser sends an Origin request header. For example, if a page from google makes an AJAX call to facebook, something like this is added to request headers
Origin: http://google.com
When facebook sees this header, it will check if google.com is in their valid list of allowed hosts and agrees for this by sending the following headers in response.
Access-Control-Allow-Origin: http://google.com
Note that the host name in Origin and Allow-Origin headers should match for the browser to accept and act on the response received. You can even restrict the methods & custom headers allowed by setting the following headers in response
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER
Finally to answer your question, change your Ajax definition like below
$.ajax({
url: 'http://some-other-domain.com/upload.php',
data: fa,
contentType: false,
processData: false,
type: 'POST',
success: function(data) {
alert(data);
}
});
As you're just doing a simple POST call with file, its a simple request so Allow-Origin header will suffice. In your PHP, read the Origin header check if it's in your list and set the same header value in Allow-Origin response header. I'm not aware of PHP but it's hopefully something like this :)
<?php
$headers = apache_request_headers();
foreach ($headers as $header => $value) {
if($header == "Origin"){
/* check if $value is in your list
if yes, set the response header */
header('Access-Control-Allow-Origin: $value');
/* adding just this header will allow any method from this
domain, in case you need to allow only POST method add
Access-Control-Allow-Methods header as well */
break;
}
}
// do the remaining processing of request
?>
More resources on
Hope this answers your question :)
