在 Vue 3 中设置全局 Axios 标头

Posted

技术标签:

【中文标题】在 Vue 3 中设置全局 Axios 标头【英文标题】:Setting Global Axios Headers in Vue 3 【发布时间】:2021-08-27 19:51:43 【问题描述】:

我正在尝试使用 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
      )
    


这是控制台中的错误:

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)

当我通过外部文件运行它时,似乎有些东西丢失了。我确定我遗漏了一些明显的东西,但我似乎无法确定它。我发现另一个接受的答案遵循类似的逻辑here,但它不适用于我的情况。有没有可能是 webpack 搞砸了?

【问题讨论】:

【参考方案1】:

您应该像这样导出 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(...)

【讨论】:

以上是关于在 Vue 3 中设置全局 Axios 标头的主要内容,如果未能解决你的问题,请参考以下文章

如何在 axios 中设置全局标头?

如何在axios中设置全局标头?

vue中设置全局请求头,并判段地址为/my为设置请求头

全局修改 axios 默认标头时出现问题 - Vue

如何在 Angular2 中设置全局自定义标头?

在 axios 中设置授权标头