获取正文数据无效的帖子参数为空

Posted 2023-02-19

【中文标题】获取正文数据无效的帖子参数为空

【英文标题】：Fetch post with body data not working params empty

【发布时间】：2017-02-12 00:17:54

【问题描述】：

我正在尝试重写我的 ajax 调用以获取：

阿贾克斯：

  $.post(
    context: this,
    url: "/api/v1/users",
    data:  
      user: 
        
          email: email,
          password: password
         
    
  ).done((user) => 
  ).fail((error) => 
  )

获取：

  fetch('/api/v1/users',   
  method: 'POST',
  headers: 
    "Content-Type": "application/json"
  ,      
    body:  
    "user" : 
      
        "email" : email,
        "password" : password
       
  
  )
  .then(res =>   
    if (res.status !== 200)  
        console.log("error")
      )          
     else 
      res.json().then(data => 
        console.log(data)
      )
    
  )

我收到一个错误的空参数〜来自我的服务器的错误请求。

我也找到了这种方法，但是在下面的这段代码中我得到了一个错误：Unexpected token.

  var payload =  
    "user" : 
      
        "email" : email,
        "password" : password
       
  ;

  var data = new FormData();
  data.append( "json", JSON.stringify( payload ) );

  fetch('/api/v1/users',   
  method: 'POST',
  headers: 
    "Content-Type": "application/json"
  ,      
    body: data
  )

如何重写 ajax 请求来获取？

【参考方案1】：

你应该试试这个：

fetch('/api/v1/users', 
    method: 'post',
    body: JSON.stringify("user":
        "email": email,
        "password": password
    ),
);

fetch API

【讨论】：

谢谢，这与我的问题中的第二个示例基本相同。尽管 ajax 版本工作得很好，但它仍然显示参数丢失。

【参考方案2】：

在github上关注了这个话题：https://github.com/matthew-andrews/isomorphic-fetch/issues/34

我的问题的解决方案是使用 JSON.stringify 函数并将 Content-Type 标头设置为 application/json。不太清楚为什么我的问题中的第二次尝试没有奏效。

fetch('/api/v1/users',   
    method: 'post',
    headers: 'Content-Type': 'application/json',
    body: JSON.stringify( "user": 
      "email" : email,
      "password" : password
    ),
)

官方 MDN 文档：

var myHeaders = new Headers();
myHeaders.append('Content-Type', 'application/json');

fetch('/contact-form', 
    method: 'POST',
    headers: myHeaders,
    mode: 'cors',
    cache: 'default',
    body: JSON.stringify(fields)
).then(() => 
    dispatch(contactFormSubmitSuccess());
);

【讨论】：

（它在 chrome 中失败，而不是这个，我将参数编码为 url）

按照 Dudis 的建议添加标题对我有用，谢谢！

对我不起作用，fetch 仍在做get 而不是发帖！

【参考方案3】：

将body 作为json 发送失败时以这种方式工作。

        var formData = new FormData();
        formData.append('key1', 'value1');
        formData.append('key1', 'value2');

        fetch('url', 
            method: 'post',
            headers: 
                'Accept': 'application/json',
                'Content-Type': 'multipart/form-data'
            ,
            body: formData
        `)`

编辑：就我而言，服务器仅通过表单数据提交来识别内容。该代码未编写为将请求正文读取为 json。因此，您的服务器端代码也可能存在问题。

【讨论】：

经过大量的努力，上述方法对我有用。谢谢你的解释。

【参考方案4】：

headers: 'Content-Type': 'application/json'

已经回答了

【讨论】：

是的，标题压力不够。当问题是我在标题中拼错应用程序时，我花了太长时间感到困惑。第一步是检查错别字。

这确实发生在我身上，具有完全相同的提取功能。可以强调 Jacob C. 所说的足够多。错字的人！

对我来说是 'header: 'Content-Type': 'application/json''。血腥的错别字

没有 s，它只会让你多花一天的时间。 :(

【参考方案5】：

如果您使用 Express 服务器来处理请求，请确保添加以下行：

app.use(express.json(limit:'1mb'))

【参考方案6】：

TL;DR 如果没有mode: 'cors'，您的 JSON 正文将无法通过。

我为此挣扎了一会儿。 cors 是问题所在。假设您正在执行从一个域到另一个域的请求（即从localhost:8080 到localhost:3000），您需要在获取设置中有mode: 'cors' 并且您的接收域（localhost:3000）需要允许来自发送域的请求(localhost:8080)。

所以上面代码中的描述：

来自localhost:8080的请求到localhost:3000

fetch('http://localhost:3000/users/sign_in', 
      method: 'POST',
      mode: 'cors', // this cannot be 'no-cors'
      headers: 
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      ,
      body: JSON.stringify(
        "user": 
          "email": `$this.state.userEmail`,
          "password": `$this.state.userPass`
        
      ),
    )

然后确保您的接收域 localhost:3000 允许来自 localhost:8080 的 CORS。

【参考方案7】：

尝试将 (body-parser) 放在 app.js / server.js 的顶部：

app.use(bodyParser.json());