ReactJS axios POST请求将所有选项作为单个JSON键发送，且值为空

编程问答 2022-06-09

问题描述

我在前端使用ReactJS，并向CodeIgniter4后端发出POST请求。

我的前端呼叫看起来像这样-

axios.post('http://localhost/exampleApiEndpoint',{ sample_key: 'sample_value' })
    .then(response => {
        // Do something
    })

如果我运行以下代码-

$this->request->getPost('sample_key');

我希望它返回“ sample_value”，但我得到null


所以我决定在CI4中运行以下代码，以查看后台发生了什么

$this->request->getRawinput()

它返回{{"hello":"world"}: ""}

足够肯定的是，当我运行$this->request->getPost('{"hello":"world"}');时，它会给我一个空字符串（没有空值，而是空字符串）

我对这两个框架都是陌生的。我不完全确定如何从这一点进一步进行。 我使用以下代码段作为一种变通方法，只要输入中没有符号，该代码段就可以工作。如果有，它们将转换为下划线。这不理想。

$raw_input = $this->request->getRawinput();
$json_input = json_decode(array_key_first($raw_input));

解决方法

Axios在将数据发送到API时以JSON主体的格式发送数据。为了以POST形式发送数据，您必须使用FormData API。

let formData = new FormData();
formData.append('sample_key','sample_value');

发送此FormData对象而不是要发送的Javascript对象：

axios.post('http://localhost/exampleApiEndpoint',formData)
    .then(response => {
        // Do something
    })

在CI4控制器中，您可以通过以下操作获取数据：

$data = $this->request->getPost();

参考：https://developer.mozilla.org/en-US/docs/Web/API/FormData

,

axios client is posting the request with Content-Type header of application/json并作为JSON有效负载的原始输入流。

使用CodeIgniter\HTTP\IncomingRequest::getJSON从请求正文中获取该流，并将其作为JSON解析为一个对象。

$json = $this->request->getJSON();

// Access sample_key field from object
$json->sample_key;

您还可以通过将第一个参数传递true来将请求正文解析为关联数组。

$json = $this->request->getJSON(true);

// Access 'sample_key' key in array
$json['sample_key'];
,

以这种方式使您成为数据对象，然后将该对象传递给发布请求。

let data = {sample_key: "sample_value"}

axios.post('http://localhost/exampleApiEndpoint',data)
.then(response => {
    // Do something
})

谢谢

axioscodeigniter-4ionic-frameworkreactjsreactjs