CORS 预检通道未成功.仅在火狐中.铬工作正常

Question

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

在我的应用程序中，我有许多不同的屏幕，除了一个之外，我可以访问它们，它只是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 调试：这是操作：选项

在铬中它的不同

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

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

更新：

我尝试更改请求 URL 以使用 IP 地址而不是服务器名称，但它没有区别。

更新：

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

018-06-11 10：20：32 错误： [缺少控制器异常] 控制器 找不到类跨系列控制器。异常属性： 数组 ( 'class' => 'Cross-seriesController'， 'plugin' => NULL， ( 请求 URL：/api/cross-series/network-series 堆栈跟踪：

我无法弄清楚它从哪里获得跨系列控制器，因为网址是：

/

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

Answer 1

找到了解决方案。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();
}

Answer 2

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