无法使CORS与Slim API一起工作

Unable to get CORS working with a Slim API

本文关键字：API 一起 工作 Slim CORS      更新时间：2023-09-26

我真的很难让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();

虽然我不太喜欢总是这样设置标题，而不仅仅是在选项请求上，但它可以消除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

一个简单的解决方案可能是创建一个中间件：

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-*标头。

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

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
相关文章：