I am developing a mobile application in Ionic framework and uses Symfony framework as web services.when I post the data to symfony controller I got error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost/Symfony/web/app_dev.php/login. (Reason: CORS header 'Access-Control-Allow-Origin' missing). Here is my code
angular.module('starter.services', [])
.factory('Stack',function($http,$q,ApiEndpoint){
var baseurl =ApiEndpoint.url;
// alert(baseurl);
// var baseurl =ApiEndpoint.url;
return{
Login:function(info){
// alert(info);
var Url = baseurl+'/login';
var defer = $q.defer();
// console.log(item);
$http.post(Url,info).
success(function (data, status, headers, config) {
defer.resolve(data);
}).
error(function (data, status, headers, config) {
defer.reject();
});
return defer.promise;
},
}
})
My Ionic Controller is:
angular.module('starter.controllers', [])
.controller('login', function($scope,$state,Stack) {
$scope.user = {};
console.log($scope.user.username);
$scope.signIn = function(){
var username = $scope.user.username;
var password = $scope.user.password;
var data = "pass=" + username + "&mobiles=" + password;
Stack.Login(data).then(function(response){
// $scope.data = response.totalLease;
});
}
$state.go('login');
})
My Symfony controller is:
public function loginAction()
{
$response = new Response(json_encode(array('data' => 'a')));
$response->headers->set('Access-Control-Allow-Origin', '*');
// $response->headers->set("Access-Control-Allow-Methods: OPTIONS, GET, POST");
$response->headers->set('Content-Type', 'application/json');
return $response;
}
My Routing is:
sample_email:
pattern: /login/{_locale}.{_format}
defaults: { _controller: AcmeDemoBundle:Demo:login, _format: json, _locale: en}
requirements:
_method: GET|POST
_format: JSON
Try to put this at the beginning of your symfony's web/.htaccess
Header set Access-Control-Allow-Origin *
Header set Access-Control-Allow-Headers X-Requested-With,content-type,X-Forwarded-Proto
Header set Access-Control-Allow-Methods GET,POST,PUT,OPTIONS
It will allow all origins for your xhr calls. It's okay for a dev environment, but you better specify explicitly your origins in production.
Also browsers use method OPTIONS to check availability of a webservice.
More infos on OPTION method here : RESTful API methods; HEAD & OPTIONS