CODEWITHSUNDEEP
angularjsapachesymfonycors
antanas_sepikas
antanas_sepikas

Reputation: 5704

Angularjs Apache2 Symfony2 Cors

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.

Upvotes: 1

Views: 1698

Answers (1)

Stev
Stev

Reputation: 1112

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

Upvotes: 1

Related Questions