Vue项目中axios配置POST请求却发送GET请求的原因及解决方法

核心原因 #

你在axios请求配置里犯了一个拼写错误：把请求方法的属性名写成了methods（复数），但axios要求的是method（单数）。因为识别不到正确的配置项，axios会自动使用默认的GET请求，这就是为什么Chrome显示发送的是GET，后端POST路由接收不到请求。

修复步骤 #

1. 修正前端axios请求配置
   把代码里的methods:'post'改成method:'post'，修改后的代码如下：

trim: function () {
  this.$axios({
    method:'post', // 这里改为单数的method
    url:'/trim'
  }).then(response=>{
    alert('success!')
  }).catch(error=>{
    console.log(error)
    return alert('failed to accepted trim signal!')
  })
},

2. 补充后端响应逻辑
   当前你的后端trim接口没有返回任何响应，前端请求会一直处于pending状态，最终触发catch回调。需要在路由处理函数里添加响应：

// trim.js 文件
router.post('/', function (req, res) {
    console.log('server successed to accept trim post!')
    // 添加响应，告诉前端请求已处理
    res.status(200).json({ message: 'Trim request received successfully' })
})

3. 确认跨域代理配置（开发环境）
   如果你的前端项目运行端口和后端8081不同，需要在Vue项目的vue.config.js中配置代理（如果还没配的话）：

module.exports = {
  devServer: {
    proxy: {
      '/trim': {
        target: 'http://localhost:8081',
        changeOrigin: true
      }
    }
  }
}

验证 #

修改后重启前端和后端服务，点击按钮就能看到后端控制台打印日志，前端弹出success!提示了。

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