无法让 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(){

});

在 API 服务器上，我正在使用 slim 并具有以下内容：

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

虽然我不太高兴总是像这样设置 headers 而不是纯粹根据选项请求，但它可以消除 Access-Control-Allow-Origin 上的预检错误。我现在的问题是，每次我尝试访问 API 时，我都会在 OPTIONS 上收到预检错误。我不知道如何 return 在 Slim 中通过预检选项检查取得成功。

我尝试添加条件步骤来捕获选项并设置 headers:

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

然而这似乎没有任何效果。我还尝试为所有 OPTIONS 请求创建一个通用路由，但同样没有成功。

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

我知道解决这个问题可能真的很简单，并且可能是由于我完全不了解两个服务器之间的请求过程以及需要 headers 造成的。任何帮助将不胜感激。

尝试加载 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-* headers。

Answer 2

您可以尝试修改 .HTACCESS 文件以在所有 API 的

中添加 CORS 支持

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

无法让 CORS 使用 Slim API

Unable to get CORS working with a Slim API

javascript

api

slim

angularjs