由于有问题的 405 错误而禁用 CORS

Question

背景：

我创建了一个基于 slim 的 API，目前运行在本地域，例如 localhost/api

我有一个使用 ionic 框架的移动应用程序（基于 angular），并且有以下代码使用 httpClient 作为 http:

let accessurl = this.general.apiURL + '/v2/update/status/' + this.machineToChange;
    const headers = new HttpHeaders()
      .set('Authorization', 'Bearer: ' + this.general.apiKey);
    this.http.put(accessurl, {
      statusFuelled: 1
    }, { headers: headers }).subscribe(result => {
      console.log(JSON.stringify(result));
    }, err => {
      console.log(JSON.stringify(err));
    });

我已经尝试了所有我能找到的让 slim 框架禁用 cors 的堆栈溢出问题，这里只是几个：

$app->options('/update/status/{machineNo}', function ($request, $response) {
  header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
  header('Access-Control-Allow-Credentials: true');
  header('Access-Control-Max-Age: 86400');    // cache for 1 day
  return $response->withStatus(200);
});

或：

//
  if (isset($_SERVER['HTTP_ORIGIN'])) {
      header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
      header('Access-Control-Allow-Credentials: true');
      header('Access-Control-Max-Age: 86400');    // cache for 1 day
  }

  // Access-Control headers are received during OPTIONS requests
  if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {

      if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
          header("Access-Control-Allow-Methods: GET, POST, PUT, OPTIONS");

      if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
          header("Access-Control-Allow-Headers:        {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");

      exit(0);
  }

或：

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
header('Content-Type: application/json');

或在 .HTACCESS 中：

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
Header add Access-Control-Allow-Headers: Content-Type

还有更多使用 composer 的中间件。

我也有运行来自 Slim Website 的代码，但没有成功。

没有奏效，它给我带来了很多麻烦，所以我只想永久禁用 CORS，因为它弊大于利。

我不知道问题是在哪里引起的，错误的 httpClient 请求或 CORS 是正常的痛苦。

如果有人可以提供帮助，请告诉我。

由于服务器限制，我是运行 PHP 5.6，所以像 tuupola/cors 这样的中间件将无法工作，因为 PHP <7

一些错误：

Safari 抛出：加载资源失败：预检响应不成功

Chrome 抛出：对预检请求的响应未通过访问控制检查：请求的资源上不存在 'Access-Control-Allow-Origin' header。因此不允许访问来源“http://localhost:8100”。响应具有 HTTP 状态代码 405。

Chrome 还会抛出：OPTIONS http://localhost/api/v2/update/status/{ID} 405（方法不允许）

Answer 1

发送 header 响应：

return $response
        ->withHeader('Access-Control-Allow-Origin', '*')
        ->withHeader('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Accept, Origin, Authorization')
        ->withHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');

另请参阅 slim 文档：https://www.slimframework.com/docs/v3/cookbook/enable-cors.html

Answer 2

CodeKit 是 CORS 无法正常工作的问题。当运行直接通过 MAMP 所有请求都正确返回时，但是当通过 CodeKit 服务器发送相同的请求时，CORS 中间件不起作用。

我相信 Daan 的回答更适合其他遇到此问题的人，因此将其标记为正确。

由于有问题的 405 错误而禁用 CORS

Disable CORS due to problematic 405 errors

php

slim

cors

ionic-framework

angular