fetch() POST 请求，数据成为对象键 [重复]

Posted 2023-02-22

【中文标题】fetch() POST 请求，数据成为对象键 [重复]

【英文标题】：fetch() POST Request, data becomes object key [duplicate]

【发布时间】：2019-01-21 20:35:57

【问题描述】：

是否有人在发送 POST 获取请求时遇到问题，其中 JSON 字符串成为接收端的对象键，特别是使用 "Content-Type": "application/x-www-form-urlencoded" 作为标头。

我还尝试使用 CircularJSON 来尝试修复 stringify 可能创建的任何循环引用，因为 NodeJS 在收到 JSON 时会吐出类型错误。

客户端代码：

/* Triggered on a button click */
triggerTransfer(product) 

    let headers = 
        body: CircularJSON.stringify(product),
        headers:  "Content-Type": "application/x-www-form-urlencoded" ,
        method: "POST"
    

    this.setState(
        transferState: 
    /* State changes*/
        
    )

    fetch( _API + '/products/transfer', headers)
        .then(res => 
            return res.json()
        )
        .then((res) => 
            console.log(res)
            this.setState(
                transferState: 
        /* State changes*/
                
            )
        )
        .catch(err => this.setState( error: err ))

服务器端路由（请注意，我也在使用 body-parser），我知道这条路由没有任何作用，但这只是为了帮助调试问题：

router.post('/transfer', async (req,res,next)=>
  console.log(req.body);
  res.json(req.body);
)

从客户端发送时，JSON 字符串如下所示：

  "id": 1127,
  "identifier": "CABLE-RJ45-NETWORK-TESTER",
  "description": "CABLE-RJ45-NETWORK-TESTER",
  "price": 50,
  "cost": 35,
  "vendor": 
    "id": 104,
    "identifier": "",
    "name": "",
    "_info": 
      "company_href": ""
    
  ,
  "_info": 
    "lastUpdated": "2012-08-30T05:37:13Z",
    "updatedBy": ""
  

在服务端收到时，对象如下所示：

  '"id":1127,"identifier":"CABLE-RJ45-NETWORK-TESTER","description":"CABLE-RJ45-NETWORK-TESTER","price":50,"cost":35,"vendor":"id":104,"identifier":"","name":"","_info":"company_href":"","_info":"lastUpdated":"","updatedBy":""': ''

请注意，从客户端发送的 JSON 字符串现在是对象键 :(

任何帮助都会很棒

【问题讨论】：

您将正文设置为字符串，并且将内容类型设置为编码形式，这没有任何意义。您要发送键/值对还是 JSON？

我只需要在服务器端访问该对象，您会推荐哪种方法以及实现此目的的方法？

我会将它作为 JSON 发送，并通过为 application/json 设置正确的 HTTP 标头来读取正文作为字符串。见***.com/questions/29775797/fetch-post-json-data

【参考方案1】：

一切都好，通过更改标头并远离编码解决了这个问题：

    let headers = 
        body: CircularJSON.stringify(product),
        headers:  "Content-Type": "application/json" ,
        method: "POST"