执行 POST 时，CSRF 令牌在标头中传递答案

【问题标题】：CSRF token gets passed in the header when performing POST执行 POST 时，CSRF 令牌在标头中传递
【发布时间】：2017-12-05 21:57:01
【问题描述】：

我正在 Django 之上设置 VueJS SPA。我在/api 上运行石墨烯端点，graphiql 中的查询运行良好。我已经设置了前端，并且正在使用 Apollo Client 来查询服务器。我的设置完成了：

const CSRFtoken = Cookies.get('csrftoken')

const networkInterface = createNetworkInterface({
  uri: '/api',
  transportBatching: true
})

networkInterface.use([{
  applyMiddleware (req, next) {
    if (!req.options.headers) {
      req.options.headers = {}  // Create the header object if needed.
    }
    req.options.headers['X-CSRFToken'] = CSRFtoken
    console.log('applied middleware')
    next()
  }
}])

const apolloClient = new ApolloClient({
  networkInterface,
  connectToDevTools: true
})

Vue.use(VueApollo)

const apolloProvider = new VueApollo({
  defaultClient: apolloClient
})

new Vue({
  el: '#app',
  apolloProvider,
  render: h => h(App)
});

我的 POST 请求具有“X-CSRFToken”标头，其值由Cookies 提供。截图如下：

不幸的是，Django 禁止访问（错误 403）并显示消息：“CSRF cookie missing”。

我在网上搜索过，但找不到任何相关内容。

提前致谢！

【问题讨论】：

那么...您的问题是什么，您收到 CSRF 错误了吗？
是的，403 Forbidden，Django 说它缺少 CSRF cookie。
如果您记录const CSRFtoken，该值是否正确？
是的，看起来不错

标签： django vue.js apollo

【解决方案1】：

TL;DR：问题是标头中缺少 cookie，包括 csrftoken。

要解决这个问题，请追加

  opts: {
    credentials: 'same-origin'
  }

到createNetworkInterface 初始化，如下所示。

// headers for auth
const networkInterface = createNetworkInterface({
  uri: '//localhost:8000/api',
  transportBatching: true,
  opts: {
    credentials: 'same-origin'
  }
})

长篇大论：

过去两天我一直在摆弄这个，在 Django 和 Apollo 社区频道上四处询问。我真的很绝望，所以我考虑从 Apollo 切换到其他 GraphQL 客户端。我查看了http://graphql.org/graphql-js/graphql-clients/ 的参考实现。它看起来像这样：

var xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.open("POST", "/graphql");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Accept", "application/json");
xhr.onload = function () {
  console.log('data returned:', xhr.response);
}
xhr.send(JSON.stringify({query: "{ hello }"}));

我已将它放入我的代码中，将 CSRF 令牌 cookie 添加到标题中并检查 - 它有效。我真的很高兴，但想知道为什么一个有效，而另一个无效。如上所述，我发现 Apollo 的请求缺少 Cookies Header。实际上XMLHttpRequest con 是您无法在不添加 Cookie 的情况下发送请求 - 而 Fetch API 允许您这样做。而 Apollo 基于 Fetch API。我检查了客户的文档，它就在那里。 :)

【讨论】：