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 CredentialsBloccata 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 TuupolaMiddlewareCorsMiddleware([
"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!
2
Answers
you need to handle OPTIONS Requests in Slim by adding the handler seperately
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
I’d like to point out that in your
TuupolaMiddlewareCorsMiddleware
instance you indicated as originhttp://localhost:8100
but your are on port8080
so that could be a starting point.if this doesn’t work I suggest lazy CORS handling, as indicated in slim doc, here’s an example: