前端JS通过XMLHttpRequest发送PUT请求控制台返回空问题求助

前端代码问题及修改 #

• 请求URL占位符未替换：你当前写的请求地址是http://localhost:5000/parcel/:id/location，其中:id是路由参数占位符，需要替换为你要更新的包裹实际的数据库ID值，示例修改：

// 假设你要更新的包裹ID存在变量targetId里，替换为实际值
const targetId = "你实际的文档ID";
XHR.open('PUT', `http://localhost:5000/parcel/${targetId}/location`, true);

• 冗余请求头可删除：XHR.setRequestHeader('Method', 'PUT')是多余配置，open方法已经指定了请求方法，不会影响功能但可以移除。

后端代码问题及修改 #

• 缺少JSON解析中间件：首先确认你的Node.js入口文件（比如app.js）已经配置了express内置的JSON解析中间件，否则无法读取前端传的JSON格式请求体：

// 放在路由注册之前
app.use(express.json());

• 路由参数取值错误：const {_id} = req.params.id写法错误，req.params.id就是你传的ID字符串，不是包含_id属性的对象，修改为：

const _id = req.params.id;

• 请求体取值错误：const {location} = req.body.location写法错误，前端传的请求体结构是{"location": "xxx"}，直接从req.body取值即可：

const { location } = req.body;

• findByIdAndUpdate用法错误：第二个参数需要传入更新操作的对象，不是直接传location值，同时添加new: true配置让方法返回更新后的文档：

parcels = await parcel.findByIdAndUpdate(_id, { location }, { new: true });

• CORS配置错误：
  1. 响应头名写错：Access-Control-Allow-Method应为复数Access-Control-Allow-Methods
  2. Access-Control-Allow-Headers不需要加application/json;charset=utf-8，仅保留Content-Type即可
  3. 缺少OPTIONS预检请求处理：浏览器发送非简单请求（比如带JSON头的PUT请求）前会先发OPTIONS请求校验跨域权限，你需要全局配置CORS，示例：

// 全局中间件，放在路由之前
app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "http://localhost:8080");
  res.header("Access-Control-Allow-Headers", "Content-Type");
  res.header("Access-Control-Allow-Methods", "PUT, OPTIONS");
  if (req.method === 'OPTIONS') return res.sendStatus(200);
  next();
})

配置完成后可以删除PUT路由内单独写的CORS头配置。

• 空返回判断缺失：findByIdAndUpdate如果没找到对应ID的文档会返回null，你直接res.send(parcels)就会返回空内容，需要增加判断：

parcels = await parcel.findByIdAndUpdate(_id, { location }, { new: true });
if (!parcels) return res.send('未找到对应包裹');
res.send(parcels);

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