title: Apollo-client returns "400 (Bad Request) Error" on sending mutation to server
body: <p>I am currently using the <a href="https://akryum.github.io/vue-apollo/" rel="noreferrer">vue-apollo</a> package for Apollo client with VueJs stack with django and graphene-python for my GraphQl API.</p>
  
  <p>I have a simple setup with vue-apollo below:</p>
  
  <pre class="lang-js prettyprint-override"><code>import Vue from 'vue'
  import { ApolloClient } from 'apollo-client'
  import { HttpLink } from 'apollo-link-http'
  import { InMemoryCache } from 'apollo-cache-inmemory'
  import VueApollo from 'vue-apollo'
  import Cookies from 'js-cookie'
  
  
  const httpLink = new HttpLink({
    credentials: 'same-origin',
    uri: 'http://localhost:8000/api/',
  })
  
  // Create the apollo client
  const apolloClient = new ApolloClient({
    link: httpLink,
    cache: new InMemoryCache(),
    connectToDevTools: true,
  })
  
  export const apolloProvider = new VueApollo({
    defaultClient: apolloClient,
  })
  
  // Install the vue plugin
  Vue.use(VueApollo)
  </code></pre>
  
  <p>I also have CORS setup on my Django <code>settings.py</code> with the <a href="https://github.com/ottoyiu/django-cors-headers" rel="noreferrer">django-cors-headers</a> package. All queries and mutations resolve fine when I use graphiQL or the Insomnia API client for chrome, but trying the mutation below from my vue app:</p>
  
  <pre class="lang-js prettyprint-override"><code>'''
  
  import gql from "graphql-tag";
  import CREATE_USER from "@/graphql/NewUser.gql";
  
  export default {
    data() {
      return {
        test: ""
      };
    },
    methods: {
      authenticateUser() {
        this.$apollo.mutate({
          mutation: CREATE_USER,
          variables: {
            email: "test@example.com",
            password: "pa$$word",
            username: "testuser"
          }
        }).then(data =&gt; {
            console.log(result)
        })
      }
    }
  };
  </code></pre>
  
  <p>NewUser.gql</p>
  
  <pre><code>mutation createUser($email: String!, $password: String!, $username: String!) {
    createUser (username: $name, password: $password, email: $email)
    user {
      id
      username
      email
      password
    }
  }
  </code></pre>
  
  <p>returns with the error response below: </p>
  
  <pre><code>POST http://localhost:8000/api/ 400 (Bad Request)
  
  ApolloError.js?d4ec:37 Uncaught (in promise) Error: Network error: Response not successful: Received status code 400
  </code></pre>
  
  <p>Regular queries in my vue app, however, work fine resolving the right response, except mutations, so this has me really baffled</p>