CORS Errors only with 400 bad request react fetch request

The problem is with the request you are making!

The server will not set the 'Access-Control-Allow-Origin' header when you make a bad request, it just rejects it and in turn causing the CORS error.

Fix the bad request cause, missing parameter usually and you are good to go!!!

The problem is with your "php exceptions" on the server-side, When you are throwing an error the headers are not set.

You have to set a few header when you throw the exceptions:

$c = new \Slim\Container();
$c['errorHandler'] = function ($c) {
    return function ($request, $response, $exception) use ($c) {
        return $c['response']->withStatus(500)
    ->withHeader('Access-Control-Allow-Origin', 'http://localhost:3000')
    ->withHeader('Access-Control-Allow-Headers', 'Origin, Content-Type, Accept, X-Auth-Token')
    ->withHeader('Access-Control-Allow-Credentials', 'true')
    ->withHeader('Access-Control-Expose-Headers', 'Content-Length, X-Kuma-Revision')
    ->withHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS')
    ->write(exception->getMessage());
                             
    };
};