This days I’m working with phonegap/cordova projects. I’m using topcoat and AngularJs to build the client side and Silex for the backend. Cordova applications are “diferent” than a common web application. Our client side is normally located inside our mobile device (it’s also possible to use remote webviews). Our cordova application must speak with our backend. The easiest way to perform this operation is to use a REST. AngularJS has a great tool to connect with RESTFull resources. Silex is also great to build RESTFull services. I wrote a couple of posts about it.
With the first request form our AngularJS application (into our android/iphone device) to our Silex application, we will face with CORS. We cannot perform a request from our “local” phonegap/cordova application to our remote WebServer. We cannot do it if we don’t allow it explictily. With Silex it’s pretty straight forward to do it. We can use the event dispatcher and change the request with after handler.
$app->after(function (Request $request, Response $response) {
$response->headers->set('Access-Control-Allow-Origin', '*');
});
We can do more strict, setting also “Access-Control-Allow-Methods” and “Access-Control-Allow-Headers” headers but only with this header we can work properly with our RESTFull Silex application from our phonegap/cordova application.
Gonzalo Ayuso - Web Architect 
You do realize that using “*” basically defeats the purpose of using CORS, right? 🙂 That’s leaving the app open to any request that comes in so it’s almost like not having CORS at all…
Yes. But when we work with API servers we need to choose between ‘*’ (aka no restrictions) or a permission nightmare. We also can decide where allow CORS or not.
Anyway it’s simmilar than the usage of jsonp to avoid the same domain policy. Give us a security policy and we will hack it 🙂
I’m try ajax for my silex api
$(document).ready(function() {
$.ajax({
method : “POST”,
url : “http://api.mydomain.com/auth/validate-credentials”,
data : {username: “test”, password : “test”},
headers: {
‘X-Token’ : “xtoken”,
},
beforeSend : function (request) {
// console.log($(this));
}
}).done(function (response) {
console.log(response);
});
});
My silex app
$app->after(function (Request $request, Response $response) {
$response->headers->set(‘Access-Control-Allow-Origin’, ‘*’);
});
and still get error
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://api.mydomain.com/auth/validate-credentials. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)
Have you any idea?
my example is very simple. It’s better to use more headers. There’s a good project to handle CORS in Silex
https://github.com/jdesrosiers/silex-cors-provider