Yii2接收fetch发送的POST请求参数值为空是什么原因？

核心原因 #

• 前端发送的是Content-Type: application/json格式的JSON请求体，Yii2默认的$request->post()方法仅支持解析application/x-www-form-urlencoded和multipart/form-data格式的请求参数，不会自动解析JSON内容，所以直接调用post('name')会返回null
• 后端代码存在逻辑错误：就算成功获取到name参数值（普通字符串类型），调用json_decode()处理普通字符串也会返回null，完全不符合返回逻辑

解决方法 #

方案1：后端适配JSON请求（更适合前后端分离场景） #

临时适配单个接口

直接解析原始请求体获取JSON参数：

public function actionSaveBabysitter() {
    $request = Yii::$app->request;
    // 解析原始JSON请求体
    $params = json_decode($request->getRawBody(), true);
    $name = $params['name'] ?? null;
    $id = $params['id'] ?? null;
    
    // 正常返回JSON数据即可，不需要decode参数
    return json_encode([
        'status' => 'success',
        'id' => $id,
        'name' => $name
    ]);
}

全局适配所有JSON请求

在Yii2的应用配置文件中添加JSON请求解析器，配置后所有JSON格式的POST请求都可以直接用$request->post()获取参数：

'components' => [
    'request' => [
        'parsers' => [
            'application/json' => 'yii\web\JsonParser',
        ],
        // 其他原有request配置保持不变
    ],
    // 其他组件配置
]

配置完成后原有后端代码只需要删除多余的json_decode即可正常运行：

public function actionSaveBabysitter() {
    $request = Yii::$app->request;
    $post = $request->post('name');
    echo json_encode(['name' => $post]);
}

方案2：前端修改请求格式 #

前端调整fetch配置，发送application/x-www-form-urlencoded格式的请求，无需修改后端原有配置：

let is = document.querySelector("meta[name='csrf-token']").content;

fetch("http://site.se/react/save-babysitter", {
  method: "POST",
  headers: {
   "Content-Type": "application/x-www-form-urlencoded",
   "Accept": "application/json",
   "X-CSRF-Token": is
  },
  body: new URLSearchParams({
   'id': e.id,
   'name': this.state.ChangeName
  })
}).then(response => response.json())
.then((data) =>  console.log(data));

注：前端headers中传输的csrf-param参数无实际作用，Yii2默认读取X-CSRF-Token头做校验，可直接删除该字段。

内容的提问来源于stack exchange，提问作者Александр Ковалёв