CODEWITHSUNDEEP
angularjscakephpcorscakephp-2.5
Nikel Weis
Nikel Weis

Reputation: 724

CORS - CakePHP does not accept AngularJS JSON-Request

I'm using CakePHP as backend and AngularJS as frontend, whereas front- & backend are in different domains so this is basically a CORS-situation.

Basically I'm trying to send the contents of a form to a Cake-API (later this is meant to do authentication part - but I'm failing earlier) via $http.post. So here is the code:

aeapBackend.login = function(username, password) {
    return $http.post(
        API_URL + 'api_mobile_user/login', {
            test: username,
            test2: password
        }
    );
};

Whereas the corresponding API in CakePHP looks like this:

function beforeFilter() {
    parent::beforeFilter();
    $this->Auth->allow(array('login'));
}

public function login() {
    $this->response->header(array(
            'Access-Control-Allow-Origin' => '*',
            'Access-Control-Allow-Headers' => 'Content-Type'
        )
    );

    $this->autoRender = false;
}

What happens next is that the preflight OPTIONS request ist done - which looks quite good to me:

Request Headers:

OPTIONS /api_mobile_user/login HTTP/1.1
Host: aeap.localhost
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: http://asf.localhost
User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53
Access-Control-Request-Headers: accept, content-type
Accept: */*
Referer: http://asf.localhost/?username_input=hjk&password_input=hjgk&login_button=
Accept-Encoding: gzip,deflate,sdch
Accept-Language: de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4

Response headers:

HTTP/1.1 200 OK
Date: Wed, 05 Nov 2014 15:29:00 GMT
Server: Apache/2.4.10 (Win32) OpenSSL/1.0.1i PHP/5.5.15
X-Powered-By: PHP/5.5.15
Set-Cookie: CAKEPHP=j6st0hnq8ear2cc6psg56d6eu3; expires=Wed, 05-Nov-2014 19:29:00 GMT; Max-Age=14400; path=/; HttpOnly
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Content-Type
Content-Length: 0
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8

But when the actual POST-request is done I get an status code 403:

XMLHttpRequest cannot load http://aeap.localhost/api_mobile_user/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://asf.localhost' is therefore not allowed access. The response had HTTP status code 403.

How can I avoid this? In my opinion I already enabled CORS support for Cake ['Access-Control-Allow-Origin']. It seems to me that AngularJS posts some additional informations whioch are not checked during the preflight and then rejected by the backend.

Used versions: CakePHP 2.5.3, AngularJS: 1.3.0

Upvotes: 2

Views: 5341

Answers (2)

T73 Biz
T73 Biz

Reputation: 1

For what it's worth, the proper way to do this for Cakephp 3 is as follows

public function beforeFilter() {
    parent::beforeFilter();
    $this->Auth->allow(array('login'));
    $this->eventManager()->off($this->Csrf);
}

Although, this is not recommended for AJAX requests. The following doc can help you more. CSRF And AJAX

Upvotes: 0

Nikel Weis
Nikel Weis

Reputation: 724

Thanks to Marvin Smit I was able to determine the reason for the behavior which was not connected to CORS are the headers. I set 'Access-Control-Allow-Origin' => '*'on web-server level so I was able to get a response which pointed to the security component of CakePHP.

I basically tried to send a POST-Reuqest to an API which did not expect that data should be posted to it. Therefore the access was denied. So I had to add $this->Security->csrfCheck = false to the beforeFilter:

function beforeFilter() {
    parent::beforeFilter();
    $this->Auth->allow(array('login'));
    $this->Security->csrfCheck = false;
}

Upvotes: 2

Related Questions