CORS 预检通道未成功。仅在 Firefox 中。 Chrome 工作正常

Question

所以我有一个不寻常的问题，我不确定如何进行调试。我有一个 angular 4 应用程序，它在服务器端使用 cakephp。

在我的应用程序中，我可以访问许多不同的屏幕，但只有一个屏幕是 Firefox 的唯一问题。如果我使用 chrome 就可以打开它。我在 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).

这是我用来导航到屏幕的link

<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>

然后在 php 我有以下代码用于 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');

在日志中，我可以看到 Firefox 和 Chrome 的输出不同。在 FF 中，我得到以下

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

在 Chrome 中不同

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

这是我从 angular 2 升级到 angular 5 后才开始的。我不确定这是否与它有任何关系，但在我的旧环境中它工作正常但我无法获得它现在可以与 Firefox 一起使用。关于我如何开始调试这样的东西有什么想法吗？

更新：

我试过更改请求 URL 以使用 IP 地址而不是服务器名称，但并没有什么不同。

更新：

我可以在我的 php 日志中看到尝试路由到正确的控制器时出错

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:

我不知道它从哪里得到 Cross-seriesController 因为 url 是：

/api/cross-series/network-series

这条路线是

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

这些是 http 请求 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

Answer 1

找到解决方案。 Firefox 正在使用选项对 headers.

进行预检

我在 PHP 中添加了代码来处理响应

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();
}

Answer 2

我也遇到了同样的问题，因为状态代码是 404，所以只需单独处理请求类型选项并确保状态代码应为 200

CORS 预检通道未成功。仅在 Firefox 中。 Chrome 工作正常

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

php

firefox

cakephp

cakephp-routing

angular