Symfony 4 FOSuserbundle - 通过 React-Redux Axios 提交表单答案

【问题标题】：Symfony 4 FOSuserbundle - submit form via React-Redux AxiosSymfony 4 FOSuserbundle - 通过 React-Redux Axios 提交表单
【发布时间】：2018-03-16 17:12:30
【问题描述】：

我正在使用 Symfony 4 作为后端构建 PWA，同时使用 FOSUserbundle 来管理用户。

使用 redux-form 和 Axios 提交注册表单时，它没有按要求发布信息。

这是我在 Firefox 开发工具的“网络”选项卡上看到的发布内容；

   {"fos_user_registration_form[email]":"email@gmail.com",
    "fos_user_registration_form[plainPassword[first]":"password",
    "fos_user_registration_form[plainPassword[second]":"password",
    "fos_user_registration_form[username]":"username"}

这是 $_POST 转储在控制器中显示的内容：

array(1) { ["{"fos_user_registration_form"]=> array(1) { ["email"]=> string(0) "" } }

正确的 $_POST 输出应该是（使用常规 Symfony/FOSUserbundle 表单发布时）：

array(1) { ["fos_user_registration_form"]=> array(3) { ["email"]=> string(22) "email@gmail.com" ["username"]=> string(8) "用户名" ["plainPassword"]=> 字符串(8) "数组(2)" } }

在处理以下帖子的 Redux 操作中，我使用了在“常规”Symfony/FOSUserbundle 帖子请求中观察到的相同 HTTP 标头：

export function actionSubmitRegister(values){
const url = "/register/";
return {
    type: SUBMIT_REGISTER,
    payload: axios.post(url,{
            "fos_user_registration_form[email]": values.fos_user_registration_form['email'],                    
            "fos_user_registration_form[plainPassword][first]": values.fos_user_registration_form['plainPassword']['first'],
            "fos_user_registration_form[plainPassword][second]": values.fos_user_registration_form['plainPassword']['second'],
            "fos_user_registration_form[username]": values.fos_user_registration_form['username']},
            {
                headers: {
                    'Accept':'text/html,application/xhtml+xml',
                    'Content-Type':'application/x-www-form-urlencoded'}
        })
}
}

所以，我确实有格式问题，但我似乎无法正确排列它。

谢谢

【问题讨论】：

标签： php reactjs symfony fosuserbundle axios

【解决方案1】：

尽管接受了 header 参数，但 Axios 似乎无法处理 'Content-Type':'application/x-www-form-urlencoded'。

根据documentation，需要使用URLSearchParameters 来完成此操作。还需要一个 polyfill 来解决不支持它的常见嫌疑人（ IE ）。

因此，Redux 操作的代码应该如下所示（不使用 polyfill）：

export function actionSubmitRegister(values){
const url = "/register/";

let data = new URLSearchParams();
data.append("fos_user_registration_form[email]", values.fos_user_registration_form['email']);
data.append("fos_user_registration_form[plainPassword][first]", values.fos_user_registration_form['plainPassword']['first']);
data.append("fos_user_registration_form[plainPassword][second]", values.fos_user_registration_form['plainPassword']['second']);
data.append("fos_user_registration_form[username]",values.fos_user_registration_form['username']);
return {
    type: SUBMIT_REGISTER,
    payload: axios.post(url, data)
}
}

【讨论】：