Vue Post 函数发送空正文答案

【问题标题】：Vue Post function sending null bodyVue Post 函数发送空正文
【发布时间】：2020-04-09 15:09:49
【问题描述】：

前端基于 Vue 2.6.1 构建。我正在使用 fetch 发送一个发布请求以从我的网络服务中获取数据。调用流程如下：

Vue 页面触发事件
然后将事件分派到模块。
模块操作调用下面提到的服务。

获取代码：

function GetBulkOperationData(tbData) {

const requestOptions = {
    method: 'POST',
    headers: authHeader(),
    body: JSON.stringify({ tbData })
};

return fetch(`${config.apiUrl}/a/b`, requestOptions)
    .then(handleResponse)
    .then(bulkOperationData => {
        return bulkOperationData;
    });
}

调试时的屏幕截图：

来自网络服务的屏幕截图：

但是，如果我从 Postman 发送相同的请求，服务会正确地将 JSON 转换为对象。 JS中构造的JSON体如下：

"{"tbData":{"draw":1,"sortOn":"lastCommunicationDate","sortBy":"desc","pageNo":1,"pageSize":10,"searchFilters":{"utNumber":"","utModelName":"1234","accountName":"","lastCommunicationDate":"","dateActivated":"","firmwareVersion":"","currentOperationState":""},"data":null}}"

不确定我在这里缺少什么。

【问题讨论】：

确保您发送的是Content-Type: application/json 并在后端通过.tbData.YOUR_KEY 访问它
@tbhaxor 它已经存在了。 auth head 函数就是这样做的。这就是它的作用：'Authorization': 'Bearer' + user.token, 'Content-Type': 'application/json'
您的模型中有 tbData 吗？很难说，但如果请求正文就像这样，它看起来会更好地匹配模型。 {"draw":1,"sortOn":"lastCommunicationDate","sortBy":"desc", ...
@Rosco 是的。找到了可行的解决方案。从 tbdata 中删除 {}。

标签： javascript asp.net-core vuejs2 vuex asp.net-core-webapi

【解决方案1】：

只是remove "{}" 出tbData 体内：

    const requestOptions = {
      method: 'POST',
      headers: authHeader(),
      body: JSON.stringify(tbData)
    };

【讨论】：