title: CORS preflight channel did not succeed. Only in Firefox. Chrome works fine
body: <p>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.</p>
  
  <p>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</p>
  
  <blockquote>
    <p>Cross-Origin Request Blocked: The Same Origin Policy disallows reading
    the remote resource at
    <a href="http://localhost:8080/api/cross-series/network-series" rel="noreferrer">http://localhost:8080/api/cross-series/network-series</a>. (Reason: CORS
    preflight channel did not succeed).</p>
  </blockquote>
  
  <p>This is the link I use to navigate to the screen</p>
  
  <pre><code>&lt;div class = "col-xs-4 col-sm-4 col-md-4 col-lg-4"  [routerLink]="['/dashboards/cross-series/network',{networkId:3}]"&gt;
  
              &lt;img src = "assets/img/networks/com-circle.png" class = "cross-series-navigation-icon clickable"
                   alt = "Com"/&gt;
  
          &lt;/div&gt;
  </code></pre>
  
  <p>Then in on the php I have the following code for Cors</p>
  
  <pre><code>        $this-&gt;response-&gt;header('Access-Control-Allow-Origin', 'http://localhost:4200');
  //  $this-&gt;response-&gt;header('Access-Control-Allow-Origin', 'http://localhost:8066');
          $this-&gt;response-&gt;header('Access-Control-Allow-Credentials', 'true');
          $this-&gt;response-&gt;header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, DELETE');
          $this-&gt;response-&gt;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-&gt;allowedActions, 'options');
  
  
          CakeLog::debug("This is the action: " . print_r($this-&gt;action, true), 'debug');
  </code></pre>
  
  <p>In the log I can see the output is different for Firefox and Chrome. In FF I get the following </p>
  
  <blockquote>
    <p>2018-06-10 22:33:48 Debug: This is the action: options</p>
  </blockquote>
  
  <p>In Chrome its differnt </p>
  
  <blockquote>
    <p>2018-06-10 22:41:44 Debug: This is the action: getNetworkSeries</p>
  </blockquote>
  
  <p>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?</p>
  
  <p>Update:</p>
  
  <p>Ive tried changing the request URL to use the IP address instead of the server name and its hasnt made a difference. </p>
  
  <p><strong>Update:</strong></p>
  
  <p>I can see in my php logs that there is a error trying to route to the correct controller</p>
  
  <blockquote>
    <p>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:</p>
  </blockquote>
  
  <p>I cant figure out where its getting Cross-seriesController from as the url is:</p>
  
  <blockquote>
    <p>/api/cross-series/network-series</p>
  </blockquote>
  
  <p>and the route for this is </p>
  
  <pre><code> Router::connect('/cross-series/network-series',
                  array(
                      'controller' =&gt; 'Series',
                      'action' =&gt; 'getNetworkSeries',
                      '[method]' =&gt; 'POST',
                      'ext' =&gt; 'json',
                  ) );
  </code></pre>
  
  <p>These are the http request headers</p>
  
  <pre><code>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
  </code></pre>