CORS Issues with Slim PHP API - "Http failure response: 0 Unknown Error"

Question

I'm experiencing CORS-related issues when making requests to my Slim PHP API from my Angular application. I'm getting the following error message in the console:

Error from client log console: XHROPTIONS http://localhost:8080/api/validate CORS Missing Allow Credentials

Bloccata richiesta multiorigine (cross-origin): il criterio di corrispondenza dell’origine non consente la lettura della risorsa remota da http://localhost:8080/api/validate. Motivo: previsto “true” in header CORS “Access-Control-Allow-Credentials”.

Bloccata richiesta multiorigine (cross-origin): il criterio di corrispondenza dell’origine non consente la lettura della risorsa remota da http://localhost:8080/api/validate. Motivo: richiesta CORS non riuscita. Codice di stato: (null). Http failure response for http://localhost:8080/api/validate: 0 Unknown Error

Here is my middleware code:

php

  $fitnetApi->slim->add(function (Request $request, Response $response, callable $next) {
        $uri = $request->getUri()->getPath();
        
        // Controlla se l'URI inizia con '/api'
        if (strpos($uri, '/api') === 0) {
            $cookies = $request->getCookieParams();
            $token = $cookies['jwt_token'] ?? null; // Usa l'operatore null coalescing

    
            // Se non c'è un token, continua con il middleware successivo
            if (!$token) {
                return $response
                ->withHeader("Content-Type", "application/json")
                ->withStatus(401)
                ->write(json_encode([
                    "status" => "error",
                    "message" => "token invalid"
                ], JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT));
            }
    
            try {
                // Decodifica il token
                $decoded = JWT::decode($token, new Key('', 'HS256'));
    
                // Controlla se il token è scaduto
                if (isset($decoded->exp) && $decoded->exp < time()) {
                    
                    $rtoken = $cookies['rjwt_token'] ?? null;;
                    $decRjwt = JWT::decode($rtoken, new Key('', 'HS256'));
    
                    // Controlla se il rtoken esiste e non è scaduto
                    if ($decRjwt && isset($decRjwt->exp) && $decRjwt->exp > time()) {
                        // Rigenera un token
                        $newToken = JWT::encode(
                            [
                                'id' => $decoded->id,
                                'type' => $decoded->type,
                                'exp' => time() + 60 * 15 // 15 minuti
                            ],
                            "",
                            "HS256"
                        );
    
                        // Aggiunge il nuovo token come attributo alla richiesta
                        $request = $request->withAttribute('new_token', $newToken);
                    } else {
                        // Se il rtoken è scaduto, restituisci un errore
                        return $response
                            ->withHeader("Content-Type", "application/json")
                            ->withStatus(401)
                            ->write(json_encode([
                                "status" => "error",
                                "message" => "rtoken expired, renew auth"
                            ], JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT));
                    }
                }
            } catch (ExpiredException $e) {
                // Gestisci il caso in cui il token JWT è scaduto
                return $response
                    ->withHeader("Content-Type", "application/json")
                    ->withStatus(401)
                    ->write(json_encode([
                        "status" => "error",
                        "message" => "Token expired"
                    ], JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT));
            } catch (SignatureInvalidException $e) {
                // Gestisci il caso in cui il token JWT è invalido
                return $response
                    ->withHeader("Content-Type", "application/json")
                    ->withStatus(401)
                    ->write(json_encode([
                        "status" => "error",
                        "message" => "Invalid token signature"
                    ], JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT));
            } catch (\Exception $e) {
                // Gestione generica di eccezioni JWT
                return $response
                    ->withHeader("Content-Type", "application/json")
                    ->withStatus(401)
                    ->write(json_encode([
                        "status" => "error",
                        "message" => "Invalid token"
                    ], JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT));
            }
        }
    
        // Continua con il prossimo middleware o la route
        return $next($request, $response);
    });

cors settings in middleware:

 $fitnetApi->slim->add(new Tuupola\Middleware\CorsMiddleware([
        "origin" => ["http://localhost:8100"],
        "methods" => ["GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"],
        "headers.allow" => ["Token", "Authorization", "If-Match", "If-Unmodified-Since", "Content-Type"],
        "headers.expose" => ["Authorization"],
        "credentials" => true,
        "cache" => 0,
    ]));

The error occurs when making a POST request to http://localhost:8080/api/validate. Despite the CORS headers being set, I still receive an "Unknown Error" with a status of 0.

I've verified that the backend is running on localhost:8080. The API responds correctly to requests made through Postman. I've checked for JavaScript errors in the Angular application.

What could be causing these CORS issues, and how can I fix the error so that my Angular application can communicate with the Slim PHP API successfully?

Any help would be appreciated!

Answer 1

you need to handle OPTIONS Requests in Slim by adding the handler seperately

$app->options('/{routes:.+}', function ($request, $response, $args) {
return $response;
});

Refer : https://www.slimframework.com/docs/v3/cookbook/enable-cors.html

you can also try adding CORS header directly in Apache , try adding this to .htaccess

<IfModule mod_headers.c>
    Header always set Access-Control-Allow-Origin "http://localhost:8100"
    Header always set Access-Control-Allow-Methods "GET, POST, PUT, PATCH, DELETE, OPTIONS"
    Header always set Access-Control-Allow-Headers "Token, Authorization, If-Match, If-Unmodified-Since, Content-Type"
    Header always set Access-Control-Allow-Credentials "true"
</IfModule>