CORS: Content-Type is not allowed by Access-Control-Allow-Headers in preflight response

Question

Im building an app using vuejs and lumen for the api,

my vuejs app is throwing an error when trying to authenticate

XMLHttpRequest cannot load http://api.dev/auth/login. Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

I have some middleware to handle cors

class cors {

    /**
     * @var array
     */
     protected $settings = [
      'maxAge'            => 0,
      'origin'            => '*',
      'allowMethods'      => '*',
      'exposeHeaders'     => '*',
      'allowedHeaders'    => '*'
     ];

public function handle(ServerRequestInterface $request, Closure $next)
{
   //handle preflight request
    if ('OPTIONS' == $request->getMethod()) {
        $response =  new \Illuminate\Http\Response('',"204");
        $this->setOrigin($request, $response);
        $this->setAllowHeaders($request,$response);
        return $response;
    }
}

/**
 * @param ServerRequestInterface $request
 * @param ResponseInterface $response
 */
protected function setOrigin(ServerRequestInterface $request,$response)
{
    $origin = $this->settings['origin'];
    if (is_callable($origin)) {
        $origin = call_user_func($origin,$response->withAddedHeader('Origin',$origin));
    }
    $response->headers->set('Access-Control-Allow-Origin', $origin);
}

/**
 * @param ServerRequestInterface $request
 * @param ResponseInterface $response
 */
protected function setAllowHeaders(ServerRequestInterface $request,$response)
{
    if (isset($this->settings['allowedHeaders'])) {
        $allowedHeaders = $this->settings['allowedHeaders'];
        if (is_array($allowedHeaders)) {
            $allowedHeaders = implode(", ", $allowedHeaders);
        }
    }
    else { 
        $allowedHeaders = $request->hasHeader("Access-Control-Request-Headers");
    }

    if (isset($allowedHeaders)) {
        $response->headers->set('Access-Control-Allow-Headers', $allowedHeaders);
    }
}
}

In chrome my response headers show

Access-Control-Allow-Headers:*
Access-Control-Allow-Origin:*
Cache-Control:no-cache
Content-Type:text/html; charset=UTF-8
Date:Mon, 10 Oct 2016 16:10:52 GMT
Server:Caddy
Status:204 No Content
X-Powered-By:PHP/7.0.10

If i've set a wild card Access-Control-Allow-Headers why is it not accepting the header?

Answer 1

According to the answer to this question, wildcards for the Access-Control-Allow-Headers is relatively recent (May 2016) so it's probably not widely adopted by most browsers.

You should probably define exactly what headers you want to allow in the preflight request.