Django + VueJS：POST 403 Forbidden - CSRF 令牌丢失或不正确

Question

我在后端运行 Django + Django REST framework，在前端Vue.js。 GET 请求工作正常，通过 Postman/Insomnia 的 POST 请求也可以，但是通过 Vue.js 前端 return 的 POST 请求在浏览器控制台中出现错误：

POST http://127.0.0.1:8000/api/questions/ 403 (Forbidden)
{detail: "CSRF Failed: CSRF token missing or incorrect."}

这就是我获取 CSRF 令牌然后获取 POST 请求的方式：

文件：csrf_token.js:

import Cookies from "js-cookie";
var CSRF_TOKEN = Cookies.get("csrftoken");
export { CSRF_TOKEN };

文件：api.service.js：

import CSRF_TOKEN from "./csrf_token.js";

async function getJSON(response) {
  if (response.status === 204) return "";
  return response.json();
}

function apiService(endpoint, method, data) {
  const config = {
    credentials: "same-origin",
    method: method || "GET",
    body: data !== undefined ? JSON.stringify(data) : null,
    headers: {
      "content-type": "application/json",
      "X-CSRFToken": CSRF_TOKEN
    }
  };
  return fetch(endpoint, config)
    .then(getJSON)
    .catch(error => console.log(error));
}

export { apiService };

MyComponent.vue:

...
methods: {
  onSubmit() {
    apiService(endpoint, method, { content: this.content })
      .then(response_content => {
        console.log(response_content)   
      });
  }
}
...

Answer 1

好的，我的情况是 export/import 问题。

export default CSRF_TOKEN;

而不是

export { CSRF_TOKEN };

成功了

Django + VueJS：POST 403 Forbidden - CSRF 令牌丢失或不正确

Django + VueJS: POST 403 Forbidden - CSRF token missing or incorrect

javascript

python

django

csrf

vue.js