vue+axios发起put请求后报错400 (Bad Request)
我在使用axios发起put请求报错400 (Bad Request)
以下是代码
<el-drawer
title="编辑订单"
:visible.sync="table"
direction="rtl"
size="60%">
<div>
<el-form :model="editForm">
<el-row :gutter="30" style="padding-top: 2%;padding-right: 2%;">
<el-col :span="12">
<div style="display: flex;align-items: center;">
<el-tag type="success" style="margin-left: 4%;"> 订单编号 </el-tag>
<el-input v-model="editForm.BillID" style="margin-left: 3%;" placeholder="请输入内容" clearable></el-input>
</div>
</el-col>
<el-col :span="12">
<div style="display: flex;align-items: center;">
<el-tag> 订单名称 </el-tag>
<el-input v-model="editForm.BillName" style="margin-left: 3%;" placeholder="请输入内容" clearable></el-input>
</div>
</el-col>
</el-row>
<el-row :gutter="30" style="padding-top: 6%;padding-right: 2%;">
<el-col :span="12">
<div style="display: flex;align-items: center;">
<el-tag style="margin-left: 4%;"> 车 型 </el-tag>
<el-input v-model="editForm.CarType" style="margin-left: 4%;" placeholder="请输入内容" clearable></el-input>
</div>
</el-col>
<el-col :span="12">
<div style="display: flex;align-items: center;">
<el-tag type="success"> 车 主 </el-tag>
<el-input v-model="editForm.OwnerName" style="margin-left: 4%;" placeholder="请输入内容" clearable></el-input>
</div>
</el-col>
</el-row>
<el-row :gutter="30" style="padding-top: 6%;padding-right: 2%;">
<el-col :span="12">
<div style="display: flex;align-items: center;">
<el-tag style="margin-left: 4%;"> 车 牌 号 </el-tag>
<el-input v-model="editForm.CarID" style="margin-left: 3%;" placeholder="请输入内容" clearable></el-input>
</div>
</el-col>
<el-col :span="12">
<div style="display: flex;align-items: center;">
<el-tag> 联系电话 </el-tag>
<el-input v-model="editForm.Iphone" style="margin-left: 3.6%;" placeholder="请输入内容" clearable></el-input>
</div>
</el-col>
</el-row>
<el-row :gutter="30" style="padding-top: 6%;padding-right: 2%;">
<el-col :span="12">
<div style="display: flex;align-items: center;">
<el-tag type="success" style="margin-left: 4%;"> 订单时间 </el-tag>
<!-- <el-input v-model="SeBillTime" style="margin-left: 3%;" placeholder="请输入内容" clearable></el-input> -->
<el-date-picker v-model="editForm.BillTime" type="datetime" placeholder="选择日期" style="margin-left: 3%;width: 100%;"></el-date-picker>
</div>
</el-col>
</el-row>
<el-row :gutter="30" style="padding-top: 6%;padding-right: 2%;">
<el-col :span="24">
<div style="display: flex;align-items: center;">
<el-tag type="warning" style="margin-left: 2%;">进出厂时间</el-tag>
<!-- <el-input v-model="SeCdate" style="margin-left: 1.6%;" placeholder="请输入内容" clearable></el-input> -->
<el-date-picker v-model="editForm.JCdata" style="margin-left: 1.6%;width: 100%;" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
</div>
</el-col>
</el-row>
<el-row :gutter="30" style="padding-top: 6%;padding-right: 2%;">
<el-col :span="12">
<div style="display: flex;align-items: center;">
<el-tag style="margin-left: 4%;"> 材料费用 </el-tag>
<el-input v-model="editForm.MaterialsManey" style="margin-left: 3%;" placeholder="请输入内容" clearable></el-input>
</div>
</el-col>
<el-col :span="12">
<div style="display: flex;align-items: center;">
<el-tag type="warning"> 维修费用 </el-tag>
<el-input v-model="editForm.PojManey" style="margin-left: 3.6%;" placeholder="请输入内容" clearable></el-input>
</div>
</el-col>
</el-row>
<el-row :gutter="30" style="padding-top: 6%;padding-right: 2%;">
<el-col :span="12">
<div style="display: flex;align-items: center;">
<el-tag type="danger" style="margin-left: 4%;"> 总 金 额 </el-tag>
<el-input v-model="editForm.Amount" style="margin-left: 3.6%;" placeholder="请输入内容" clearable></el-input>
</div>
</el-col>
</el-row>
<el-row :gutter="30" style="padding-top: 6%;padding-right: 2%;">
<el-col :span="24">
<div style="display: flex;">
<el-tag style="margin-left: 2%;"> 材料清单 </el-tag>
<el-input v-model="editForm.Repair_materials" :autosize="{ minRows: 7.7, maxRows: 12}" type="textarea" style="margin-left: 2%;width: 100%;"/>
</div>
</el-col>
</el-row>
<el-row :gutter="30" style="padding-top: 6%;padding-right: 2%;">
<el-col :span="24">
<div style="display: flex;">
<el-tag type="info" style="margin-left: 2%;"> 维修清单 </el-tag>
<el-input v-model="editForm.Repait_Poj" :autosize="{ minRows: 7.7, maxRows: 12}" type="textarea" style="margin-left: 2%;width: 100%;"/>
</div>
</el-col>
</el-row>
</el-form>
</div>
<div>
<el-row :gutter="30" style="padding-top: 6%;padding-right: 2%;">
<el-col :span="12">
<div style="display: flex;justify-content: center;align-items: center;">
<el-button style="width: 75%;margin-bottom: 8%;">取消</el-button>
</div>
</el-col>
<el-col :span="12">
<div style="display: flex;justify-content: center;align-items: center;">
<el-button @click="ReButton()" type="primary" style="width: 75%;margin-bottom: 8%;">确定</el-button>
</div>
</el-col>
</el-row>
</div>
</el-drawer>
ReButton(){
const requestData = {
BillName: this.editForm.BillName,
CarID: this.editForm.CarID,
BillID: this.editForm.BillID,
OwnerName: this.editForm.OwnerName,
Iphone: this.editForm.Iphone,
Amount: this.editForm.Amount,
// BillTime: this.editForm.BillTime,
Repair_materials: this.editForm.Repair_materials,
Repait_Poj: this.editForm.Repait_Poj,
CarType: this.editForm.CarType,
// Jdate: this.editForm.Jdate,
// Cdate: this.editForm.Cdate,
MaterialsManey: this.editForm.MaterialsManey,
PojManey: this.editForm.PojManey
};
const jsonData = JSON.stringify(requestData);
console.log(jsonData);
this.$axios.put('/Api/BillTables/' + this.editForm.Id, jsonData, {
headers: {
'Access-Control-Allow-Origin': '*'
// 其他请求标头...
}
})
.then((res) => {
// 处理成功响应
console.log(res);
})
.catch((error) => {
// 处理错误响应
console.log(error);
});
400一般是参数格式错误
你可以先用postman调下看看，如果没问题那就是你的代码有问题，如果有问题那就是接口有问题了
【以下回答由 GPT 生成】
问题分析： 根据问题描述，您在使用axios发起PUT请求时遇到了400（Bad Request）的错误。要解决这个问题，我们需要进一步了解您的具体情况，包括Vue.js版本和Axios版本，以及PUT请求的相关代码和服务器返回的错误消息。
解决方案： 1. 获取Vue.js版本和Axios版本： 您可以在Vue.js的控制台中输入以下命令来获取Vue.js版本：
console.log(Vue.version)
您也可以在项目的package.json文件中查找axios的版本号。
理解PUT请求的更改代码： 请提供用于发起PUT请求的axios代码。确保已经设置了正确的请求头（content-type等）和请求体（data等）。
查找服务器返回的错误消息： 服务器返回的错误消息通常包含有关错误的详细信息。请在浏览器的开发者工具的Network标签下找到对应的PUT请求，然后查看Response中的错误消息。您可以提供错误消息以便更好地理解问题。
分析和优化： 根据您提供的信息，我将分析您的代码，并提供针对性的优化建议。
【相关推荐】
- 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7536131
- 这篇博客也不错, 你可以看下vue中axios请求404的问题
- 除此之外, 这篇博客: vue项目 使用axios封装request请求（一）中的 一、封装axios 部分也许能够解决你的问题。
如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^
把 headers中的Content-Type改成application/x-www-form-urlencoded 试试
链接不对吧？
