Setting Global Axios Headers in Vue 3 - django

Question

I am trying to use Axios to hit my backend (Django), but I am having some trouble setting my global headers to include the CSRF token in the header.
This is reaching my server:
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
})
}
However, I want these headers to apply to all of my internal api requests. So I thought I would establish them in a separate file:
axios-site.js
import axios from "axios";
var siteApi = axios.create({
xsrfCookieName: window.rootData.csrfToken,
xsrfHeaderName: "X-CSRFTOKEN",
});
export default {
siteApi
}
Vue Component
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
})
}
}
Here is the error in 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)
It seems something is being lost when I run it through the external file. I'm sure I am missing something obvious, but I can't seem to pinpoint it. I found another accepted answer that follows a similar logic here, but it isn't working in my case. Is it possible that webpack is screwing things up?

Answer 1

You should export the axios instance like :
export default siteApi
then in main.js add it to globalProperties :
import siteApi from "#/axios-site";
...
app.config.globalProperties.siteApi=siteApi
in any child component you'll have access to that property :
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
})
}
}
}
in options api like mounted hook :
mounted(){
this.siteApi.post(...)
}