AngularJS - Cross Origin Requests Blocked


I'm developing an AngularJS project and I'm working with an external Symfony REST api. However, my requests are blocked by Angular/JS. I did some research and added following lines to the config section of my app:

.module('appName', [
.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider) {
    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];


However, firebug still throws an error: Cross Origin request blocked .. When I look into the 'NET' tab of firebug, this is what I get: NET tab screenshot

Any thoughts on this problem? Thanks in advance.

Problem courtesy of: Helena Standaert


Looks like your symfony2 application returns inappropriate CORS headers in OPTIONS request response...

I am using symfony2 in conjunction with angularjs in few projects, and there is nothing special on angular side to make it work.

To return proper CORS headers I am using in my symfony2 app.

There is configuration from dev server:

        allow_credentials: false
        allow_origin: []
        allow_headers: []
        allow_methods: []
        expose_headers: []
        max_age: 0
        hosts: []
            allow_origin: ['*']
            allow_headers: ['X-Requested-With','Content-Type','Authorization']
            allow_methods: ['POST', 'PUT', 'GET', 'DELETE']
            allow_credentials: true
            max_age: 3600
Solution courtesy of: Bogdan Savluk


It did not work for me. After all things tried I created a PHP proxy page on my localhost that does the following

<?php echo file_get_contents($_REQUEST['url']); ?>

My angular controller calls the proxy

(function (){
    var app=angular.module('xxx',[]);

    app.controller('AdsController', ['$http', function($http)
      var ads = this; = [];
 = data;


just do not forget to encode URL

Discussion courtesy of: Stan Sokolov

This recipe can be found in it's original form on Stack Over Flow.