Setting Global Axios Headers in Vue 3

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?



Read more here: https://stackoverflow.com/questions/67927352/setting-global-axios-headers-in-vue-3

Content Attribution

This content was originally published by Adam Starrh at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: