# CakePHP 3 and AngularJS integration - CORS setup

**URL:** <https://discourse.cakephp.org/t/cakephp-3-and-angularjs-integration-cors-setup/457>\
**Category:** Need Help\
**Created:** [June 4, 2016, 6:39am UTC](https://discourse.cakephp.org/t/cakephp-3-and-angularjs-integration-cors-setup/457 "2016-06-04T06:39:33Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![kenjhim](https://avatars.discourse-cdn.com/v4/letter/k/ce7236/32.png) [@kenjhim](https://discourse.cakephp.org/u/kenjhim)\
**Post date:** [June 4, 2016, 6:39am UTC](https://discourse.cakephp.org/t/cakephp-3-and-angularjs-integration-cors-setup/457/1 "2016-06-04T06:39:34Z")

</div>

Hello there. May I ask how to set up the CORS for the my CakePHP API and AngularJS frontend? I already put in the AppController@beforeFilter the following snippet but my AngularJS app says that the Origin is not setup.  
`public function beforeFilter(Event $event) { parent::beforeFilter($event); $this->Auth->allow(['login', 'index', 'view', 'getAllWithArticles', 'getAll', 'getLast', 'getMenuInfo']); $this->response->cors($this->request) ->allowOrigin('*') ->allowMethods(['PUT','POST', 'OPTIONS']) ->allowHeaders(['X-CSRF-Token']) ->allowCredentials() ->exposeHeaders(['Link']) ->maxAge(300) ->build(); }`

---

<div class="post-metadata">

**Author:** ![ADmad](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/admad/32/20_2.png) [@ADmad](https://discourse.cakephp.org/u/ADmad)\
**Post date:** [June 4, 2016, 12:24pm UTC](https://discourse.cakephp.org/t/cakephp-3-and-angularjs-integration-cors-setup/457/2 "2016-06-04T12:24:33Z")

</div>

This might help you [https://gist.github.com/ADmad/8547377](https://gist.github.com/ADmad/8547377)

---

<div class="post-metadata">

**Author:** ![kenjhim](https://avatars.discourse-cdn.com/v4/letter/k/ce7236/32.png) [@kenjhim](https://discourse.cakephp.org/u/kenjhim)\
**Post date:** [June 4, 2016, 1:05pm UTC](https://discourse.cakephp.org/t/cakephp-3-and-angularjs-integration-cors-setup/457/3 "2016-06-04T13:05:10Z")

</div>

But this one is for CakePHP 2 right? I’m using CakePHP 3 as backend.

---

<div class="post-metadata">

**Author:** ![lorenzo](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/lorenzo/32/25_2.png) [@lorenzo](https://discourse.cakephp.org/u/lorenzo)\
**Post date:** [June 4, 2016, 1:44pm UTC](https://discourse.cakephp.org/t/cakephp-3-and-angularjs-integration-cors-setup/457/4 "2016-06-04T13:44:02Z")

</div>

That will work the same Kenjhim… You just need to adapt the code to Cake 3, read the documentation section on creating dispatcher filters

---

<div class="post-metadata">

**Author:** ![kenjhim](https://avatars.discourse-cdn.com/v4/letter/k/ce7236/32.png) [@kenjhim](https://discourse.cakephp.org/u/kenjhim)\
**Post date:** [June 9, 2016, 2:13am UTC](https://discourse.cakephp.org/t/cakephp-3-and-angularjs-integration-cors-setup/457/5 "2016-06-09T02:13:20Z")

</div>

I already created the CorsFilter in src/Routing/Filter/CorsFilter.php with the following code  
`class CorsFilter extends DispatcherFilter { public function beforeDispatch(Event $event) { if ($event->data['request']->is('OPTIONS')) { $event->stopPropagation(); $event->data['response']->header(array( 'Access-Control-Allow-Origin' => '*', 'Access-Control-Allow-Methods' => 'POST, PUT, DELETE, GET, HEAD', 'Access-Control-Allow-Headers' => 'Origin, X-Requested-With, Content-Type, Authorization' )); return $event->data['response']; } } }`

I also loaded in the bootstrap.php:  
`DispatcherFactory::add('Cors');`

But I still cannot make it work. Please help.

---

<div class="post-metadata">

**Author:** ![rrd](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/rrd/32/113_2.png) [@rrd](https://discourse.cakephp.org/u/rrd)\
**Post date:** [November 30, 2019, 12:19pm UTC](https://discourse.cakephp.org/t/cakephp-3-and-angularjs-integration-cors-setup/457/6 "2019-11-30T12:19:43Z")

</div>

Did you find a solution?

---

<div class="post-metadata">

**Author:** ![sourjya](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/sourjya/32/422_2.png) [@sourjya](https://discourse.cakephp.org/u/sourjya)\
**Post date:** [December 3, 2019, 2:42am UTC](https://discourse.cakephp.org/t/cakephp-3-and-angularjs-integration-cors-setup/457/7 "2019-12-03T02:42:39Z")

</div>

I tried all of the above with Cake 3.8 and nothing worked for me.

Finally, it was this plugin (installed via composer) that saved the day: **[ozee31/cakephp-cors](https://github.com/ozee31/cakephp-cors)**

I suggest you give it a try.

Here’s my sample config for the plugin in **app.php** :

```auto
/**
 * CORS Configuration
 * Based on CORS Plugin from: https://github.com/ozee31/cakephp-cors
 */
'Cors' => [
    // Accept all origins
    'AllowOrigin' => '*',
    // Allow Credentials
    'AllowCredentials' => true,
    // Allowed Methods
    'AllowMethods' => [
        'OPTIONS',
        'GET',
        'POST',
        'PUT',
        'PATCH',
        'DELETE'
    ],
    // Accept many Headers
    'AllowHeaders' => [
        'Access-Control-Allow-Headers',
        'Access-Control-Allow-Origin',
        'Access-Control-Request-Method',
        'Access-Control-Request-Headers',
        'Authorization',
        'X-Requested-With',
        'X-CSRF-Token',
        'X-Auth-Token',
        'Origin',
        'Content-Type',
        'Accept',
        'Client-Security-Token'
    ],
    // Expose Headers
    'ExposeHeaders' => ['Link'],
    // Max age: 1 day
    'MaxAge' => 86400,
]

```