ReactJS axios POST请求将所有选项作为一个空值的JSON键发送

Question

我在前端使用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"}');时，它会给我空字符串(没有null，而是空字符串(

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

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

Answer 1

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

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

Than发送这个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

Answer 2

以这样的方式创建数据对象&然后将此对象传递给post请求。

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

感谢

Answer 3

axios客户端正在发布带有application/json的Content-Type标头的请求，并将其作为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'];