Axios + Vue 两次执行相同的 POST答案

【问题标题】：Axios + Vue executing same POST twiceAxios + Vue 两次执行相同的 POST
【发布时间】：2019-04-26 23:30:41
【问题描述】：

在 Axios 中执行 POST 时，请求总是发送两次。这不是 CORS 问题，因为我收到了两对请求（CORS 和 POST，然后是另一个 CORS 和 POST）。

我使用 hello-world 模板构建了一个示例应用程序，它仍然表现出相同的行为：

<template>
  <div class="hello">
    Test
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'HelloWorld',
  props: {
    msg: String
    },
    mounted() {
        axios.create({
            baseURL: 'https://api.example.com'
        }).post('/login', {
            token: 'tokenString'
        }).then((a) => {
            console.log(a)
        })
        .catch((err) => {
            console.log('err login')
            console.log(err)
        })
    }
}
</script>

<style scoped>
</style>

我只拿到了第二个请求的console.log，但是network tab清楚地显示了两对请求，而且API还显示已经发出了两个POST请求（参数完全相同）...

【问题讨论】：

你能分享一下导入 axios 的代码以及显示使用它的组件的代码吗？
是什么触发了这些请求？ onsubmit 或 onclick 之类的东西？
我编辑了问题来回答您的问题。 @TimWickstrom.com 它是用import axios from 'axios' 导入的； @ceejayoz 在 onsubmit 上时，在挂载的钩子上使用时行为仍然存在。
谁使用这个组件？可能是它在两个地方使用，或者它有一些v-if 或key 使其渲染次数更多？
你能设置一个 jsFiddle 或类似的东西来重现这个错误。我在许多项目中使用 Axios，但我从未经历过这种情况。最可能的罪魁祸首是您将 Axios 附加到 Vue 的方式，或者组件在应用程序中被复制并且实际上被触发了两次，或者组件在路由器中加载的方式（重复路径）。一旦在小提琴中设置了简化的用例，它就会更容易为您提供帮助。

标签： vue.js axios

【解决方案1】：

这其实是一个叫Privacy Possum的扩展的问题，所以和axios特别没有关系。

【讨论】：