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');

我希望它 return 'sample_value' 但我得到 null

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

$this->request->getRawInput()

它returns {{"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发送数据的同时，以JSONBody格式发送数据。为了让您将数据作为 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();

Answer 2

使用 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'];

Answer 3

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

let data = {sample_key: "sample_value"}

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

谢谢

ReactJS axios POST request send all options as a single JSON key with empty value