Angularjs Apache2 Symfony2 Cors

Question

I am trying to build a RESTFUL API. The structure of the app should be following: I have 2 domains "ui.domain.com", "api.domain.com"

"ui" domain serves front end app, written in JavaScript using AngularJS. "api" domain serves as back end, it is written in PHP using Symfony2

The problem that arises is that when I try send request from front end

//I have set 
//$http.defaults.headers.common['Authorization'] = 'Basic ' + Session.apiKey; 
//in angularjs run configuation

//in one of my controllers I have test function
$scope.test = function () {
    $http.get('http://api.domain.com/api/v1/test');
};

But when I send GET request it gets transformer into "OPTIONS" and I get 405 Http error.

//Request, Response log from Chrome
General:
    Remote Address:**.**.**.**:80
    Request URL:http://api.domain.com/api/v1/test
    Request Method:OPTIONS
    Status Code:405 Method Not Allowed
Response Headers:
    Access-Control-Allow-Headers:Authorization, X-Requested-With, Content-Type, Accept, Origin
    Access-Control-Allow-Methods:POST, GET, OPTIONS, PUT, PATCH, DELETE
    Access-Control-Allow-Origin:http://ui.domain.com
    Cache-Control:no-cache
    Connection:Keep-Alive
    Content-Length:123
    Content-Type:application/json
    Date:Fri, 24 Apr 2015 06:58:34 GMT
    Keep-Alive:timeout=5, max=100
    Server:Apache/2.4.7 (Ubuntu)
    X-Powered-By:PHP/5.5.9-1ubuntu4.7
Request Headers:
    Accept:*/*
    Accept-Encoding:gzip, deflate, sdch
    Accept-Language:lt,en-US;q=0.8,en;q=0.6
    Access-Control-Request-Headers:accept, authorization
    Access-Control-Request-Method:GET
    Connection:keep-alive
    Host:api.domain.com
    Origin:http://api.domain.com
    Referer:http://ui.domain.com/
    User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.90 Safari/537.36

Here's how I setup my "api" sub-domain VH

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "http://mdm-ui.sepikas.eu"
    Header set Access-Control-Allow-Methods "POST, GET, OPTIONS, PUT, PATCH, DELETE"
    Header set Access-Control-Allow-Headers "Authorization, X-Requested-With, Content-Type, Accept, Origin"
</IfModule>

And in my Symfony2 back end I have route:

/**
 * @Get("/test")
 */
public function testAction()
{
    return new JsonResponse(array(
        'message' => 'ok'
    ));
}

The strange thing to notice is that even though I explicitly add Authorization header I don't see it on request headers list provided by Chrome developers tools.

Now as far as I read on other posts and some blogs, that is not the problem with AngularJS part. But why I still get 405 Error even though I allowed CORS in my server configuration. I had I suspicion that It may be caused because I allow only get method in my route:

/**
 * @Get("/test")
 */

So I tried changing it to

/**
 * @Options("/test")
 */

Even though this doesn't make sense as I wan't to allow only "GET" method, even though It then returned 401 error instead of 405.

I got confused, and not sure what to try next, what I wan't is quite simple in my options: allow CORS to my "api" backend and send regular "GET", "POST" etc... Requests to my back end without changing it in some specific way like adding additional "OPTIONS" method to route.

why don't control it in the controller response as ` return new JsonResponse($data, 200, array('Access-Control-Allow-Origin'=> '*'));`? — Matteo
– Matteo, Commented Apr 24, 2015 at 7:22
It's make more sense to allow it on Apache side as I will need it on all routes, and explicitly adding to each header doesn't seem elegant — antanas_sepikas
– antanas_sepikas, Commented Apr 24, 2015 at 7:28
check how manage this issue fosrestbundle or some other popular rest bundle, i usually prefer control in my own base class — Matteo
– Matteo, Commented Apr 24, 2015 at 7:31
your response has a ui.domain.com response header, but you are making call to api.domain.com? — z.a.
– z.a., Commented Apr 24, 2015 at 7:54
which header exactly, I may have made mistakes renaming, cause I used my private domain, and didn't wanted to show it publicly — antanas_sepikas
– antanas_sepikas, Commented Apr 24, 2015 at 8:07

Stev · Accepted Answer · 2015-04-24 09:41:33Z

1

I use Nelmio CORS Bundle in my API's and I never have problems with CORS. https://github.com/nelmio/NelmioCorsBundle

answered Apr 24, 2015 at 9:41

Stev

1,12211 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

antanas_sepikas Over a year ago

I did, It worked out, but just one strange thing, I had add "allow_headers: ['*']" to make it work, otherwise would get 400 Bad Request

Stev Over a year ago

Check what headers is your angular app sending ( in the origin header) and put that in symfony config.

nclsvh Over a year ago

Nelmio doesn't work for me... I can do GET requests just fine, but when the front (AngularJS) submits a form that does a POST it stops.. In Chrome > Network I can see Response Headers: Allow: OPTIONS, GET, HEAD while Nelmio is configured to allow all

Collectives™ on Stack Overflow

Angularjs Apache2 Symfony2 Cors

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related