Axios GET请求带双查询参数返回500错误排查求助

我尝试使用以下Axios代码发送HTTP请求：

this.$axios.$get(`http://localhost:3000/answersExcel/${this.id}` +
                            `?date1=${this.answer[0]}` +
                            `&date2=${this.answer[1]}`
                    )
                    .then((response) => {
                        console.log(response)
                        this.answers = response.forms.answer
                    })

仅传入date1这一个查询参数时请求正常，但同时填写date1和date2后，返回500内部服务器错误，错误详情如下：

xhr.js?b50d:187          GET http://localhost:3000/answersExcel/6361c5aaf7a02c177ebebb27?date1=2022-11-02&date2=2022-11-24 500 (Internal Server Error)
    dispatchXhrRequest @ xhr.js?b50d:187
    xhrAdapter @ xhr.js?b50d:13
    dispatchRequest @ dispatchRequest.js?5270:53
    Promise.then (async)
    request @ Axios.js?0a06:88
    Axios.<computed> @ Axios.js?0a06:129
    wrap @ bind.js?1d2b:9
    axiosExtra.<computed> @ axios.js?10e8:44
    fetchData @ BtnDownloadData.vue?e9a6:86
    click @ BtnDownloadData.vue?f266:174
    invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:3015
    invoker @ vue.runtime.esm.js?2b0e:1813
    invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:3015
    Vue.$emit @ vue.runtime.esm.js?2b0e:3714
    click @ VBtn.ts?0eff:162
    invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:3015
    invoker @ vue.runtime.esm.js?2b0e:1813
    original_1._wrapper @ vue.runtime.esm.js?2b0e:7458
    createError.js?2d83:16 Uncaught (in promise) Error: Request failed with status code 500
        at createError (createError.js?2d83:16:1)
        at settle (settle.js?467f:17:1)
        at XMLHttpRequest.onloadend (xhr.js?b50d:54:1)

请问我哪里操作出错了？

• 前端参数拼接或值异常
  先排查this.answer[1]的实际值：

  • 确认它不是undefined、null或空字符串，部分后端接口对必填参数的格式校验严格，空值会触发内部错误。
  • 检查日期格式是否符合后端要求，比如是否需要转换为时间戳、YYYY/MM/DD等非横杠分隔的格式。
    建议改用Axios的params配置项自动处理参数，避免手动拼接URL的格式问题：

  this.$axios.$get(`http://localhost:3000/answersExcel/${this.id}`, {
    params: {
      date1: this.answer[0],
      date2: this.answer[1]
    }
  }).then((response) => {
    console.log(response)
    this.answers = response.forms.answer
  })
  

  这种方式会自动完成URL编码和空值过滤，减少手动拼接的潜在错误。

• 后端接口逻辑缺陷
  500错误本质是服务器内部处理失败，若前端参数无异常，需排查后端：

  • 检查后端接收date2参数的逻辑，比如是否未处理date2早于date1的异常场景，引发数据库查询错误或空指针。
  • 查看后端日志，获取具体报错信息，这是定位500错误最直接的方式。
  • 验证后端接口的参数名是否与前端完全一致，比如是否存在大小写不匹配（如后端用Date2而前端传date2）。

• 请求参数编码问题
  手动拼接URL时，若日期值包含特殊字符（虽当前是标准格式，但不排除特殊场景），可能导致后端解析失败。使用Axios的params配置会自动做URL编码，规避这类问题。

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