Access-Control-Allow-Origin header contains multiple values

I’m currently trying to query my /graphql API through IIS that uses Basic authentication.

I am receiving this error:

Fetch API cannot load http://localhost/wfgen/graphql. The 'Access-Control-Allow-Origin' header contains multiple values '*, http://localhost:3000', but only one is allowed. Origin 'http://localhost:3000' is therefore not allowed access. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I am using cors in my queries and therefore a preflight request is sent every time I make a query. In my IIS server, I entered these lines of code:

<customHeaders>
      <add name="Access-Control-Allow-Origin" value="http://localhost:3000" />
      <add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,OPTIONS" />
      <add name="Access-Control-Allow-Headers" value="Content-Type, Authorization" />
</customHeaders>

If I try to query my server using an html+ajax example, it returns a message with status 200 OK and I can console.log() my response.

If I do the same thing but using the Apollo-client, my query returns a message with status 200 OK but I also receive APOLLO_QUERY_ERROR and my console prints the error I wrote above.

I’m guessing that the error is on Apollo’s side since I receive a 200 OK status but also an APOLLO_QUERY_ERROR.

Any idea how to fix this error? Thank you

[dpnova]

@ahopkins i got it to work by doing this CORS(app, automatic_options=True) - haven’t dug into it, but seems to make things happier.

[Metourni]

I have the same problem here. I am using Laravel 5.8.0 and the version of “barryvdh/laravel-cors”: “^0.11.3”. The CORS configuration in config.cors.php is :

//...
   'supportsCredentials' => true,
    'allowedOrigins' => ['*'],
    'allowedOriginsPatterns' => [],
    'allowedHeaders' => ['*'],
    'allowedMethods' => ['*'],
    'exposedHeaders' => [],
    'maxAge' => 0,

• Kernel.php

// ...
'api' => [
            'throttle:60,1',
            'bindings',
            \Barryvdh\Cors\HandleCors::class,
        ],

// ...
 protected $middleware = [
        \App\Http\Middleware\CheckForMaintenanceMode::class,
        \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
        \App\Http\Middleware\TrimStrings::class,
        \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
        \App\Http\Middleware\TrustProxies::class,

        \Barryvdh\Cors\HandleCors::class,
    ];

My angular application ran on the host http://localhost:4200. The error message is :

supports:1 Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/sessions/1/supports' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:4200, *', but only one is allowed.