使用 react/axios 的空 POST 请求

Posted 2023-02-22

【中文标题】使用 react/axios 的空 POST 请求

【英文标题】：empty POST request with react/axios

【发布时间】：2018-06-23 05:59:49

【问题描述】：

我是 node.js 的新手并做出反应。我已经构建了一个后端 api 来为具有三个字段的 Products 模型公开 CRUD 端点：Title、Description 和 Price。我已将 node/express 用于带有 SQLite db 文件的服务器。

我已经使用 postman 测试了端点，并且可以成功访问所有产品、检索单个产品、添加新产品（但仅将标头设置为 application/x-www-form-urlencoded）和删除产品。

我正在大致遵循一个使用 react 构建前端并使用 axios 发出 http 请求的教程。我可以毫无问题地阅读，因此获取所有内容并通过 ID 获取一份工作。

但是，我的发帖请求碰壁了。如果我发送发布请求，我会在 api 服务器控制台中收到此错误后端 -

Unhandled rejection SequelizeValidationError: notNull Violation: product

在发送请求大约几分钟后，我得到了前端：

XHR failed loading: POST "http://localhost:3000/api/products/new".
dispatchXhrRequest @ xhr.js:178
xhrAdapter @ xhr.js:12
dispatchRequest @ dispatchRequest.js:59
Promise resolved (async)
request @ Axios.js:51
Axios.(anonymous function) @ Axios.js:71
wrap @ bind.js:9
NewProduct._this.createHandler @ ProductNew.js:25
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:452
executeDispatch @ react-dom.development.js:836
executeDispatchesInOrder @ react-dom.development.js:858
executeDispatchesAndRelease @ react-dom.development.js:956
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:967
forEachAccumulated @ react-dom.development.js:935
processEventQueue @ react-dom.development.js:1112
runEventQueueInBatch @ react-dom.development.js:3607
handleTopLevel @ react-dom.development.js:3616
handleTopLevelImpl @ react-dom.development.js:3347
batchedUpdates @ react-dom.development.js:11082
batchedUpdates @ react-dom.development.js:2330
dispatchEvent @ react-dom.development.js:3421
09:59:59.293 ProductNew.js:30 

Error: Network Error
at createError (createError.js:16)
at XMLHttpRequest.handleError (xhr.js:87)

如果我删除验证，则新产品成功添加到数据库中，但所有值都是 null。

这是我的 ProductNew.js 文件：

import React from 'react';
import axios from'axios';
import ButtonAdd from '../components/Buttons/ButtonAdd';

class NewProduct extends React.Component 
  state = 
    title: '',
    description: '',
    price: ''
  
  createHandler = () => 
    const data = 
      Title: this.state.title,
      Description: this.state.description,
      Price: this.state.price
    ;
    console.log('Raw data is: ' + Object.entries(data));
    // => Raw data is: Title,burger,Description,bun,Price,5

    const header = 
      ContentType: 'application/x-www-form-urlencoded',
      Accept: 'application/json'
    ;
    const querystring = require('querystring');
    console.log(querystring.stringify(data));
    // => Title=burger&Description=bun&Price=5

    console.log('Data is:' + JSON.stringify(data));
    // => Data is:"Title":"burger","Description":"bun","Price":"5"

    axios.post('/api/products/new', querystring.stringify(data), header)
    .then(res => 
      console.log(res);
    )
    .catch(err => 
      console.log(err);
    );
  

  render () 
    return (
      <div className='NewPost'>
        <h1>Add a Product</h1>
        <label>Title</label>
        <textarea rows='4' value=this.state.title onChange=(event) => this.setState(title: event.target.value) />
        <label>Description</label>
        <textarea rows='6' value=this.state.description onChange=(event) => this.setState(description: event.target.value) />
        <label>Price</label>
        <input type='number' value=this.state.price onChange=(event) => this.setState(price: event.target.value) />
        // ButtonAdd.js onClick=props.create added to <Button> tag
        <ButtonAdd create=this.createHandler>Add New Product</ButtonAdd>
      </div>
    );
  


export default NewProduct;

我在 github 上找到了这个 issue，我希望它可以解决我的问题。我添加了各种 console.log 以通过脚本跟踪状态数据发生的情况，但我看不出为什么我的 POST 请求为空。对于我做错了什么，我将不胜感激。

【参考方案1】：

您似乎使用了不正确的内容类型。正确的内容类型应该是application/json。

以下答案提供了各种内容类型传递的不同格式的示例，这可能会导致您的问题：differences in application/json and application/x-www-form-urlencoded

【讨论】：

感谢@aslantorret 提供的链接。假设我应该指定 x-www-form-urlencoded 因为内容类型必须在 postman 的标头中设置为此，才能使发布请求正常工作，我错了吗？

【参考方案2】：

也许它会以某种方式帮助你。我认为您的 axios 请求结构有问题。

文档说：axios.post(url[, data[, config]])

而不是直接放标题，作为最后一个参数：

axios.post('/api/products/new', querystring.stringify(data), header)

你应该有一个包含标头的配置对象，然后将其作为最后一个参数传递：

const config = 
  headers: 
    'Content-Type': 'application/x-www-form-urlencoded',
    'Accept': 'application/json'
  
;

axios.post('/api/products/new', querystring.stringify(data), config)

【讨论】：

另外，请确保您在标题中使用正确的内容类型，正如@aslantorret 提到的那样

如果没有数据要发布怎么办？