0

I am writing a Django/GraphQL/Apollo/Vuetify app, and I am struggling to navigate the CORS/CRSF consequences.

As far as I understand, I think that Django and GraphQL are doing the right thing on the backend with regard to CORS and CRSF. When I use the python requests library, I can successfully send a request to the graphql endpoint and get a response. To do this, I send a POST request with Content-Type multipart/form-data and make sure that data contains the correct csrfmiddlewaretoken value.

@when(u'we execute the GraphQL query "{query}"')
def step_impl(context, query):
    context.response = context.rest_client.post("/graphql/", data={"query": query})
    def post(self, path, **kwargs):
        csrftoken = self.session.cookies.get('csrftoken')
        if 'data' in kwargs and csrftoken:
            kwargs['data']['csrfmiddlewaretoken'] = csrftoken
        return self.session.post(url(path), **kwargs)

However, ApolloClient insists on sending the query using application/json and not multipart/form-data. As a result, I cannot add the csrfmiddlewaretoken field to the request payload, and I get a 403 Forbidden response.

I've followed the steps outlined in https://apollo.vuejs.org/guide-option/setup.html

import { registerPlugins } from '@/plugins'
import mitt from "mitt"

import { ApolloClient, InMemoryCache } from '@apollo/client/core'

const cache = new InMemoryCache()

const apolloClient = new ApolloClient({
  cache,
  uri: 'http://localhost:8000/graphql/',
  credentials: 'include'
})

import { createApolloProvider } from '@vue/apollo-option'

const apolloProvider = createApolloProvider({
  defaultClient: apolloClient,
})

const app = createApp(App)
app.use(apolloProvider)

This causes an error:

Error sending the query 'copies' TypeError: Failed to fetch

Chrome's network tab indicates two requests to the graphql endpoint. One of which succeds, and the other fails.

The failing request has Content-Type application/json, and I think that is the problem. I had a similar issue with my python requests based client which was solved when I started using Content-Type multipart/form-data. I just don't know how to convince ApolloClient to use that content type.

0