content-type header not allowed

[kennyngston]

When trying to connect to the graphql endpoint with Apollo, the following error occurs:

Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

However curl pulls just well:

curl -X POST -H "Content-Type: application/json" --data '{"query": "{hello}"}' http://randomhost/graphql
{"data":{"hello": "world"}}

Attached as such:

app = web.Application()
GraphQLView.attach(app, schema=schema, executor=AsyncioExecutor(loop=app.loop), graphiql=True)

Update:
Tried to create a child for GraphQLView as such:

class GQLView(GraphQLView):
    def process_preflight(self, request):
        """ Preflight request support for apollo-client
        https://www.w3.org/TR/cors/#resource-preflight-requests """
        headers = request.headers
        origin = headers.get('Origin', '')
        method = headers.get('Access-Control-Request-Method', '').upper()

        accepted_methods = ['GET', 'POST', 'PUT', 'DELETE']
        if method and method in accepted_methods:
            return web.Response(
                status=200,
                headers={
                    'Access-Control-Allow-Origin': origin,
                    'Access-Control-Allow-Methods': ', '.join(accepted_methods),
                    'Access-Control-Max-Age': str(self.max_age),
                    'Access-Control-Allow-Headers': "Content-Type"
                }
            )
        return web.Response(status=400)

When using this, I can see the query hits the server (packet capture), and I get this error:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

[dfee]

@kennyngston please replicate the curl request with headers (using -H) and include the HTTP-header output (-i).

curl -H "Origin: http://localhost:8080" \
  -H "Access-Control-Request-Method: POST" \
  ...

I'd be interested in seeing if you can reproduce the apollo error with CURL.

[kennyngston]

@dfee the second error was due to CORS protection, the graphql endpoint is not running on localhost, but the webserver that is hosting vue-apollo does. Resolved that one with a chromium plugin. However apollo does require the Access-Control-Allow-Headers 'content-type' to be there.

Ended up something like this:

class GQLView(GraphQLView):
    def process_preflight(self, request):
        """ Preflight request support for apollo-client
        https://www.w3.org/TR/cors/#resource-preflight-requests """
        headers = request.headers
        origin = headers.get('Origin', '')
        method = headers.get('Access-Control-Request-Method', '').upper()
        allowed_headers = headers.get('Access-Control-Request-Headers', '')
        accepted_methods = ['GET', 'POST', 'PUT', 'DELETE']
        if method and method in accepted_methods:
            return web.Response(
                status=200,
                headers={
                    'Access-Control-Allow-Origin': origin,
                    'Access-Control-Allow-Methods': ', '.join(accepted_methods),
                    'Access-Control-Allow-Headers': allowed_headers,
                    'Access-Control-Max-Age': str(self.max_age),
                }
            )
        return web.Response(status=400)

It works for queries.

[micheller]

@kennyngston you can use aiohttp-cors to resolve your CORS problem

sample code would look something like this:

async def start(loop):
    app = web.Application(loop=loop)
    schema = graphene.Schema(query=Query)
    gql_view = GraphQLView(
        schema=schema,
        graphiql=True,
        executor=AsyncioExecutor(loop=loop),
    )

    app.router.add_route('GET', '/graphql', gql_view, name='graphql')
    post = app.router.add_route('POST', '/graphql', gql_view, name='graphql')

    cors = aiohttp_cors.setup(
        app,
        defaults={
            "*": aiohttp_cors.ResourceOptions(
                allow_credentials=True,
                expose_headers="*",
                allow_headers="*",
            )
        }
    )
    cors.add(post)

NB! do not add route with add_route("*"), it will conflict with CORS.

[wumpus]

I tried to use GraphQLView.attach() and it does add_route('*'), can you explain why that is a CORS problem? I see that aiohttp-cors doesn't work with that but I don't understand why!