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.