时间戳

首页 > 解决方案 > CORS 预检通道未成功。仅在 Firefox 中。铬工作正常

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

问题描述

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

在我的应用程序中，我有许多不同的屏幕可以访问，除了一个，它只是 Firefox 的一个问题。如果我使用chrome，我可以打开它。我在 Firefox 中收到以下警告

跨域请求被阻止：同源策略不允许在 http://localhost:8080/api/cross-series/network-series读取远程资源。（原因：CORS 预检通道未成功）。

这是我用来导航到屏幕的链接

<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 调试：这是操作：选项

在 Chrome 中它不同

2018-06-10 22:41:44 调试：这是操作：getNetworkSeries

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

更新：

我尝试将请求 URL 更改为使用 IP 地址而不是服务器名称，但它没有产生任何影响。

更新：

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

018-06-11 10:20:32 错误：[MissingControllerException] 找不到控制器类 Cross-seriesController。异常属性：数组（'class' => 'Cross-seriesController', 'plugin' => NULL, ）请求 URL：/api/cross-series/network-series 堆栈跟踪：

我无法弄清楚它从哪里获取 Cross-seriesController 作为 url 是：

/api/跨系列/网络系列

这条路线是

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

这些是 http 请求标头

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

标签： phpangularfirefoxcakephpcakephp-routing

解决方案

找到了解决方案。Firefox 使用选项对标头进行预检。

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

推荐阅读