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

Is it possible that Apollo-Client has its own default headers when it makes a query?

It looks like the client is adding an Access-Control-Allow-Origin: * whenever it makes a request and I think that's what is causing my error.

[stubailo]

Doesn't look like it:

apollo-client/src/transport/networkInterface.ts

Line 187 in a3b9677

return fetch(this._uri, {

That header is usually something sent from the server, not the client. So you might need to look at your server configuration.

[stubailo]

If I try to query my server using an html+ajax example

What do you mean by this? Is it using GET or POST?

[ahopkins]

I am having the same issue.

Fetch API cannot load http://localhost:8000/. Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:9999, http://localhost:9999', but only one is allowed. Origin 'http://localhost:9999' 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 know that my response headers are coming back properly. When I query the same end point from any other method, they look proper:

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: *
Connection: keep-alive
Content-Length: 53
Content-Type: application/json
Keep-Alive: 60
X-Xss-Protection: 1; mode=block

Have you gotten anywhere with this?

Sorry forgot to update my status here

I actually fixed the issue I had. It didn't have anything to do with Apollo.

I'm using an IIS Server and what I did was I customized my Response headers.
I also used the URL Rewrite method in IIS Manager.

If your requests has 2 Access-Control-Allow-Origin headers, you are probably adding one before it reaches the server. Because it's your preflight request request that returns an error, the error can't be client-side since your application has no impact on the preflight request.

It's probably a middleware or something that adds the header. I would check everything that's between your application and your server if I was you.

Meant to write IIS Manager^^.
I'm using a GraphQL server.

I didn't change anything on my apllication and on my server in my solution.

[ahopkins]

Thanks @vincentpageau

I did find it. I was using sanic cors to manage my CORS. Little beknownst to me, the sanic-graphql also decides to add its own CORS. And, oddly enough, it does not overwrite the original. Poor decision in my opinion that they would add that. And, looks like I'm not the only one: graphql-python/sanic-graphql#4

No problem glad you figured it out !

[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.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions to Apollo Client!

[dpnova]

FWIW as someone who uses the python side of this issue, this ticket can be closed.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions to Apollo Client!