TypeError: axiosCookieJarSupport is not a function，Node.js正常Vue页面报错如何解决

axios-cookiejar-support 是仅兼容Node.js运行时的工具库，依赖Node.js原生http/https模块实现CookieJar注入，本身不支持浏览器环境。你写在.vue文件中的代码默认会在服务端、客户端各执行一次，客户端加载该库时会失败，导出的default为undefined，调用时就会抛出TypeError: axiosCookieJarSupport is not a function的错误。

根据你的业务场景选择对应方案即可：

场景1：登录逻辑在客户端触发（用户点击页面按钮登录） #

浏览器本身会自动管理同源请求的Cookie，无需手动引入Cookie相关工具库，直接删除相关代码即可：

<script>
const qs = require('qs')

export default {
  methods: {
    async login () {
      const session = this.$axios.create({
        withCredentials: true // 跨域请求时开启即可，同域请求默认会自动携带Cookie
      })
      const res = await session.$post('/api/auth/login', qs.stringify({ username: '', password: '' }))
        .then((res) => {
          console.log(res)
        })
    }
  }
}
</script>

登录接口返回的Set-Cookie会被浏览器自动存储，后续同域请求也会自动携带对应Cookie，不需要手动处理。

场景2：登录逻辑必须在服务端执行（SSR/SSG阶段预拉取数据、服务端鉴权） #

需要通过环境判断隔离客户端执行逻辑，仅在服务端加载对应依赖：

<script>
const qs = require('qs')
// 仅服务端加载依赖
let axiosCookieJarSupport, tough
if (process.server) {
  axiosCookieJarSupport = require('axios-cookiejar-support').default
  tough = require('tough-cookie')
}

export default {
  async asyncData({ $axios }) {
    // 仅服务端执行登录逻辑
    if (!process.server) return {}
    const session = $axios.create()
    axiosCookieJarSupport(session)
    session.defaults.jar = new tough.CookieJar()
    const res = await session.post("/api/auth/login", qs.stringify({username: '', password: ''}))
    return {
      userInfo: res.data
    }
  }
}
</script>

如果是Nuxt3环境，可以直接将这部分逻辑放到server/api目录下的服务端路由中，天然隔离客户端环境。

如果确认逻辑仅在服务端运行仍报错，可以执行以下操作排查：

• 重新安装依赖确认安装完整：npm install axios-cookiejar-support tough-cookie
• 检查版本兼容性：如果项目使用的axios版本低于1.0，可以降级安装对应兼容版本：npm install axios-cookiejar-support@1.0.1

内容的提问来源于stack exchange，提问作者Matty