Django 在Vue 3中设置全局Axios标头

我正试图使用Axios来访问我的后端（Django），但是我在设置全局标头以在标头中包含CSRF令牌时遇到了一些问题

这正在到达我的服务器：

import axios from "axios";

async function loadCards() {
  var instance = axios.create({
      xsrfCookieName: window.rootData.csrfToken,
      xsrfHeaderName: "X-CSRFTOKEN",
  });
  return await instance.post(window.rootData.urlpaths.loadCards, {
    'state': props.state.label,
    'filter': props.filter.label,
    'project': window.rootData.project
  })
}

但是，我希望这些头应用于所有内部api请求。所以我想我应该把它们建立在一个单独的文件中：

axios site.js

import axios from "axios";

var siteApi = axios.create({
  xsrfCookieName: window.rootData.csrfToken,
  xsrfHeaderName: "X-CSRFTOKEN",
});

export default {
    siteApi
}

Vue组件

import siteApi from "@/axios-site";

setup () {

    async function loadCards() {
      return await siteApi.post(window.rootData.urlpaths.loadCards, {
        'state': props.state.label,
        'filter': props.filter.label,
        'project': window.rootData.project
      })
    }

}

以下是console中的错误：

Uncaught (in promise) TypeError: _axios_site__WEBPACK_IMPORTED_MODULE_4__.default.post is not a function
    at _callee$ (ActionColumn.vue?ba4f:97)
    at tryCatch (runtime.js?96cf:63)
    at Generator.invoke [as _invoke] (runtime.js?96cf:293)
    at Generator.eval [as next] (runtime.js?96cf:118)
    at asyncGeneratorStep (asyncToGenerator.js?1da1:3)
    at _next (asyncToGenerator.js?1da1:25)
    at eval (asyncToGenerator.js?1da1:32)
    at new Promise (<anonymous>)
    at eval (asyncToGenerator.js?1da1:21)
    at _loadCards (ActionColumn.vue?ba4f:80)

Uncaught（承诺中）TypeError:\u axios\u site\u WEBPACK\u IMPORTED\u MODULE\u 4\u.default.post不是函数
在_callee$（ActionColumn.vue？ba4f:97）
在tryCatch（runtime.js？96cf:63）
在Generator.invoke[as_invoke]（runtime.js？96cf:293）
在Generator.eval[as next]（runtime.js？96cf:118）
在asyncGeneratorStep（asyncToGenerator.js？1da1:3）
at_next（asyncToGenerator.js？1da1:25）
评估时（asyncToGenerator.js？1da1:32）
在new Promise（，但它在我的情况下不起作用。有可能是webpack把事情搞砸了吗？
您应该像这样导出axios实例：

export default siteApi

然后在main.js中将其添加到
globalProperties
：

import siteApi from "@/axios-site";
...
app.config.globalProperties.siteApi=siteApi

在任何子组件中，您都可以访问该属性：

import { getCurrentInstance } from 'vue'

const MyComponent = {
  setup() {
    const internalInstance = getCurrentInstance()

   const {siteApi}= internalInstance.appContext.config.globalProperties 

   async function loadCards() {
      return await siteApi.post(window.rootData.urlpaths.loadCards, {
        'state': props.state.label,
        'filter': props.filter.label,
        'project': window.rootData.project
      })
    }
  }
}

在api选项中，如安装挂钩：

mounted(){
   this.siteApi.post(...)
}