CORS preflight channel did not succeed. Only in Firefox. Chrome works fine

So I have an unusual issue that Im not sure how to go about debugging. I have an angular 4 application that uses cakephp on the server side.

In my application I have a number of different screens that I can access ok except for one and its only an issue with firefox. I can open it ok if I use chrome. I get the following warning in firefox

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/api/cross-series/network-series. (Reason: CORS preflight channel did not succeed).

This is the link I use to navigate to the screen

<div class = "col-xs-4 col-sm-4 col-md-4 col-lg-4"  [routerLink]="['/dashboards/cross-series/network',{networkId:3}]">

            <img src = "assets/img/networks/com-circle.png" class = "cross-series-navigation-icon clickable"
                 alt = "Com"/>

        </div>

Then in on the php I have the following code for Cors

        $this->response->header('Access-Control-Allow-Origin', 'http://localhost:4200');
//  $this->response->header('Access-Control-Allow-Origin', 'http://localhost:8066');
        $this->response->header('Access-Control-Allow-Credentials', 'true');
        $this->response->header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, DELETE');
        $this->response->header('Access-Control-Allow-Headers', 'Origin, Authorization, X-Requested-With, Content-Type, Accept, Cache-Control');

        header_remove('X-Powered-By'); //remove default PHP header

        array_push($this->allowedActions, 'options');


        CakeLog::debug("This is the action: " . print_r($this->action, true), 'debug');

In the log I can see the output is different for Firefox and Chrome. In FF I get the following

2018-06-10 22:33:48 Debug: This is the action: options

In Chrome its differnt

2018-06-10 22:41:44 Debug: This is the action: getNetworkSeries

This has only started since I upgraded from angular 2 to angular 5. Im not sure if that has anything to do with it but in my old env's its working fine but I cant get it to work now with firefox. Any ideas on how I start to debug something like this?

Update:

Ive tried changing the request URL to use the IP address instead of the server name and its hasnt made a difference.

Update:

I can see in my php logs that there is a error trying to route to the correct controller

018-06-11 10:20:32 Error: [MissingControllerException] Controller class Cross-seriesController could not be found. Exception Attributes: array ( 'class' => 'Cross-seriesController', 'plugin' => NULL, ) Request URL: /api/cross-series/network-series Stack Trace:

I cant figure out where its getting Cross-seriesController from as the url is:

/api/cross-series/network-series

and the route for this is

 Router::connect('/cross-series/network-series',
                array(
                    'controller' => 'Series',
                    'action' => 'getNetworkSeries',
                    '[method]' => 'POST',
                    'ext' => 'json',
                ) );

These are the http request headers

Host: localhost:8080 User-Agent: Mozilla/5.0 (X11; Linux x86_64; 

User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:60.0) Gecko/20100101 Firefox/60.0 
Accept: text/html 
Accept-Language: en-US,en;q=0.5 
Accept-Encoding: gzip, deflate 
Access-Control-Request-Method: POST 
Access-Control-Request-Headers: content-type 
Origin: http://localhost:4200 
Connection: keep-alive Pragma: no-cache Cache-Control: no-cache

Found the solution. Firefox was using options to do a preflight check on the headers.

I added code in my PHP to handle the response

if($this->request->is("options")){

    $this->response->header('Access-Control-Allow-Origin','http://localhost:4200');
    $this->response->header('Access-Control-Allow-Methods','*');
    $this->response->header('Access-Control-Allow-Credentials', 'true');

    $this->response->header('Access-Control-Allow-Headers','Content-Type, Authorization');

    $this->response->send();

    $this->_stop();
}