405 Method Not Allowed when using headers in the fetch api

Question

I am trying to Make an ajax request using fetch, and when I do, I get a 405 (Method Not Allowed) error.

I am executing it like this:

fetch(url, {
    method: 'get',
    headers: {
        'Game-Token': '123'
    }
});

And that is giving me an error. If I remove the headers, the request goes through. However, I need that header for validation on the server.

fetch(url, { method: 'get' });

I have the following setup in my .htaccess file:

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS, FETCH"
Header set Access-Control-Allow-Credentials "true"
Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Authorization, X-CSRF-TOKEN, Game-Token, developerKey"
Header set X-Frame-Options "SAMEORIGIN"
Header set Access-Control-Expose-Headers "Game-Token"

I am not sure what is causing this to not go through.

Answer 1

So, this had nothing to do with JavaScript or the .htaccess. Instead it has to do with Lumen. We need to catch the OPTIONS request and reply back. What we did was create a middleware file that checked for the OPTIONS method and responds with a 200.

use Closure;

class CorsMiddleware
{

    public function handle($request, Closure $next)
    {

        if ($request->isMethod('OPTIONS'))
        {
            return response('',200);
        }

        return $next($request);
    }
}