Vue.js调用PUT接口更新数据时出现404错误的问题求助

问题原因 #

你定义请求URL时用了单引号(')包裹，而ES6的模板字符串变量插值${变量}语法**必须配合反引号（）**才能生效。单引号会把${this.id_product}当成普通字符串直接发送，导致后端收到的请求路径是/api/v1.0/productos/${this.id_product}/`，自然返回404。

修复代码 #

把定义path的单引号替换成反引号即可：

methods: {
    onSubmit(evt){
        evt.preventDefault()
        
        // 这里把单引号改成反引号
        const path = `http://127.0.0.1:8000/api/v1.0/productos/${this.id_product}/`

        axios.put(path, this.form).then((response) => {
            this.form.nombreProd = response.data.nombreProd
            this.form.precioProd = response.data.precioProd
            this.form.contenido = response.data.contenido
            this.form.descripcionProd = response.data.descripcionProd

            alert("Actualización exitosa")
        })
        .catch((error) => {
            console.log(error)
        })
    }
}

额外检查项 #

• 确认this.id_product有正确的数值，可以在const path前加console.log(this.id_product)打印验证，避免ID为空或undefined
• 核对Django后端的URL配置，确保存在类似path('api/v1.0/productos/<int:pk>/', views.ProductUpdateView.as_view())的路由，且视图类支持PUT请求

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