如何在Axios POST请求中传递team对象与league_id参数

我明白你遇到的问题了——明明在POST请求里同时传了team对象和league_id参数，结果服务器只收到了team。咱们一步步来解决这个问题。

首先先回顾下你的原代码：

onSubmit: function () { 
  axios.post('/api/v1/teams', 
    {team: {name: this.$refs.team_name.value}, league_id: this.$route.params.id}, 
    { headers: { Authorization: "Bearer "+localStorage.getItem('token') } }
  ).then(response => { 
    this.$router.push('/') 
  }).catch(error => { 
    this.$router.push('/create_team') 
  }) 
}

服务器当前接收的内容：

%{"team" => %{"name" => "face"}}

你期望的接收内容：

%{"team" => %{"name" => "face"}, "league_id" => 15}

解决方案 #

这里有几个关键调整点，应该能解决你的问题：

• 确保league_id是整数类型：路由参数默认是字符串格式，而你期望服务器接收整数，所以先把this.$route.params.id转换成整数。
• 显式指定Content-Type头：虽然Axios默认会设置Content-Type: application/json，但有时候环境差异可能导致这个头没正确带上，显式添加能避免解析问题。
• 提前检查请求 payload：发送前先打印payload，确认league_id确实存在且值正确，排除参数为空的情况。

修改后的完整代码：

onSubmit: function () {
  // 转换路由参数为整数
  const leagueId = parseInt(this.$route.params.id, 10);
  
  // 构造请求数据并检查
  const requestData = {
    team: { name: this.$refs.team_name.value },
    league_id: leagueId
  };
  console.log('发送的请求数据:', requestData); // 确认数据结构
  
  axios.post(
    '/api/v1/teams',
    requestData,
    {
      headers: {
        'Content-Type': 'application/json', // 显式指定JSON格式
        Authorization: "Bearer " + localStorage.getItem('token')
      }
    }
  ).then(response => {
    this.$router.push('/')
  }).catch(error => {
    this.$router.push('/create_team')
  })
}

额外排查点 #

如果调整后还是不行，可以检查：

• 确认this.$route.params.id确实有值（比如在控制台打印this.$route.params看看）
• 后端框架是否允许接收顶级的league_id参数（比如Phoenix是否需要配置参数过滤规则）

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