无法让 CORS 与 Slim API 一起使用

Question

我真的很难让 CORS 与 Slim 和 AngularJS 一起工作

AngularJS HTTP 请求：

$http({
    method: 'GET',
    headers: { 
        'Content-Type': 'application/json',
        Accepts: 'application/json'
    },
    url: 'https://apisite/v1/users/'
})
.success(function(data){
    users.users_list = data.results;
})
.error(function(){

});

在我使用 slim 的 API 服务器上，具有以下功能：

use Slim\Slim as Slim;
Slim::registerAutoloader();        
$slim = new Slim();
$http_origin = $slim->request->headers->get('Origin');
$slim->response->headers->set('Access-Control-Allow-Origin', '*');
$slim->response->headers->set('Access-Control-Allow-Credentials', 'true');
$slim->response->headers->set('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE,OPTIONS');
$slim->response->headers->set('Access-Control-Allow-Headers', 'Origin, Content-Type, Accept, Authorization');

//Routes in here

$slim->run();

虽然我对始终设置标头而不是像这样而不是纯粹针对选项请求并不太高兴，但它可以消除Access-Control-Allow-Origin 上的预检错误。我现在的问题是，每次尝试访问 API 时，我都会在 OPTIONS 上收到预检错误。我无法弄清楚如何在预检选项检查中在 Slim 中返回成功。

我已尝试添加条件步骤以捕获选项并设置标题：

if($slim->request->isOptions()){
    header("HTTP/1.1 200 OK");
}

但这似乎没有任何效果。我也尝试为所有 OPTIONS 请求创建一个通用路由，但同样没有运气。

$slim->options('/(:request/)', function () use ($slim){
    header("HTTP/1.1 200 OK");
});

我知道解决此问题可能非常简单，并且可能是由于我对两台服务器之间的请求过程以及需要哪些标头完全缺乏了解造成的。任何帮助将不胜感激。

尝试加载 AngularJS 页面时的错误输出：

OPTIONS https://apisite/api/v1/users/ 
(anonymous function) @ angular.js:10514sendReq @ angular.js:10333serverRequest @ angular.js:10045processQueue @ angular.js:14567(anonymous function) @ angular.js:14583Scope.$eval @ angular.js:15846Scope.$digest @ angular.js:15657Scope.$apply @ angular.js:15951done @ angular.js:10364completeRequest @ angular.js:10536requestLoaded @ angular.js:10477
XMLHttpRequest cannot load https://apisite/api/v1/users/. Response for preflight has invalid HTTP status code 404

Answer 1

一个简单的解决方案可能是创建一个middleware：

use Slim\Slim as Slim;

Slim::registerAutoloader();        
$slim = new Slim();

class CorsMiddleware extends \Slim\Middleware
{
    public function call()
    {
        //The Slim application
        $app = $this->app;

        //Response
        $response = $app->response;
        $response->headers->set('Access-Control-Allow-Origin', '*');
        $response->headers->set('Access-Control-Allow-Credentials', 'true');
        $response->headers->set('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE,OPTIONS');
        $response->headers->set('Access-Control-Allow-Headers', 'Origin, Content-Type, Accept, Authorization');

        $this->next->call();
    }
}

$slim->add(new \CorsMiddleware());

$slim->get('/test', function () use ($slim){
    echo "Test!";
});

$slim->run();

此应用程序中的所有响应都将包含 Access-Control-Allow-* 标头。

Answer 2

您可以尝试修改 .HTACCESS 文件以在所有 API 中添加 CORS 支持

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