Electron发起HTTP请求时POST参数无法传递到Yii2接口如何解决？

问题根因 #

Yii2返回Undefined index: username报错有两个核心原因：

1. Axios默认发送application/json格式的请求体，Yii2的Yii::$app->request->post()默认仅解析application/x-www-form-urlencoded和multipart/form-data格式的请求数据，不会自动解析JSON payload
2. 前端请求代码存在两处问题：password拼写为psssword、缺少接口必填的device_token参数

可行解决方案 #

方案1：调整Electron端请求格式（无需修改后端，推荐） #

方法A：使用qs序列化参数

1. 安装qs依赖：

npm install qs

2. 修改请求代码：

const qs = require('qs');
const axios = require('axios');

axios.post('http://localhost:8080/app/api/login', qs.stringify({
    username: 'Fred',
    password: 'Flintstone',
    device_token: '你的设备标识字符串'
}), {
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    }
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.error(error);
});

方法B：使用FormData传参

无需额外安装依赖，直接构造FormData对象即可：

const formData = new FormData();
formData.append('username', 'Fred');
formData.append('password', 'Flintstone');
formData.append('device_token', '你的设备标识字符串');

axios.post('http://localhost:8080/app/api/login', formData)
.then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.error(error);
});

方案2：修改Yii2后端配置，支持JSON请求解析 #

如果接口设计为接收JSON格式请求，可直接修改Yii2配置适配前端默认传参格式：

1. 打开Yii2项目的config/web.php文件，在components下的request配置项中添加JSON解析器：

'components' => [
    'request' => [
        // 保留原有request配置，新增以下解析规则
        'parsers' => [
            'application/json' => 'yii\web\JsonParser',
        ]
    ],
    // 其他组件配置保持不变
]

2. 修正前端请求的拼写错误、补全必填参数：

axios.post('http://localhost:8080/app/api/login', {
    username: 'Fred',
    password: 'Flintstone', // 修正拼写错误
    device_token: '你的设备标识字符串' // 补全必填参数
}).then(function (response) {
    console.log(response);
});

参数接收验证 #

修改完成后可在后端接口中临时添加日志，确认参数是否正常接收：

public function actionLogin(){
    // 临时添加日志，打印所有接收到的POST参数
    file_put_contents(__DIR__ . '/post_debug.log', var_export(Yii::$app->request->post(), true));
    if(Yii::$app->request->isPost){
        Yii::$app->response->format = Response::FORMAT_JSON;
        $data = Yii::$app->request->post();
        $username = $data['username'];
        $password = $data['password'];
        $device_token = $data['device_token'];
        $prefix = substr($username, 0, 3);
        $model = null;
    }
}

请求发起后查看ApiController.php同级目录下的post_debug.log文件即可确认参数是否正常传入。

内容的提问来源于stack exchange，提问作者Abd Alrahman