带有axios的POST请求不发送参数

Question

我正在尝试使用以下代码将一些数据从 Vue.js 发布到基于 Symfony 的后端。

       updateQuestion : function() {
            axios.post('/staff/question/api/' + this.id,{
                    id : 'test',
                    name : 'sree'
            })
                .then( response => {

                console.log(response);
            })
                .catch(error => {
                    console.log(error);
                })
        },

但是，我附加到 POST 请求的参数没有到达我的控制器。所以，我尝试了 POST 请求的替代格式，但参数仍然没有到达控制器。请告诉我有什么问题。

替代格式：

 updateQuestion : function() {
            axios({

                method : 'POST',
                url : '/staff/question/api/' + this.id,
                data: {
                    id : 'test',
                    name : 'sree'
                }

            })
                .then( response => {

                console.log(response);
            })
                .catch(error => {
                    console.log(error);
                })
        },

Answer 1

如果您不想使用$request->getContent();，而是像$_POST 一样处理它，通常像user6748331 建议的那样，这里有一个函数：

utils.js（或其他）：

export function preparePostData(data) {
    const formData = new FormData();
    for (let key in data) {
        if (data.hasOwnProperty(key)) { // for the sake of editor not screaming
            formData.append(key, data[key]);
        }
    }

    return formData;
}

在你的前端某处：

import {preparePostData} from "utils";
const data = {
  firstname: "Foo",
  lastname: "Bar"
}

const postData = preparePostData(data);
axios.post("/whereever", postData);

在您的 Symfony 控制器中：

$data = $request->request->all();

附：这仅适用于普通对象。如果你想发布数组和东西，你可能还需要在 Symfony 中 json_decode。或更改 preparePostData 函数以使其递归。

Answer 2

您可以在 JavaScript 文件中执行以下操作，而不是使用 $request->getContent();，以便能够在后端使用 $request->request->all()。

我需要这个来编写测试，因为$request->getContent(); 在我的测试中是空的。

const params = new URLSearchParams();
params.append('id', 123456);
params.append('name', 'some name');

axios({
  method: 'post',
  url: '/staff/question/api/' + this.id,
  data: params
});

另请参阅：https://github.com/axios/axios/issues/1195#issuecomment-347021460

Answer 3

安装 FOSRestBundle 来解决这个问题。

composer require friendsofsymfony/rest-bundle

https://github.com/FriendsOfSymfony/FOSRestBundle

使用此捆绑包，传入的 json 请求将自动转换为数组，直接在 $request->request->all() 或 $request->request->get('myparam') 中可用。

文档摘录：

这个捆绑包提供了各种工具来使用 Symfony 快速开发 RESTful API 和应用程序。功能包括：

• 启用输出和格式不可知控制器的视图层
• 用于生成 url 的以下 REST 约定的自定义路由加载器
• 接受标头格式协商，包括处理自定义 mime 类型
• HTTP 请求正文和 Accept 标头的 RESTful 解码
• 用于发送适当 HTTP 状态代码的异常控制器

Answer 4

我也遇到过这个问题！ 在控制器中找到了我的帖子数据：

$request->getContent();

我的 vue 脚本

onSubmit() {
  axios.post('/test/post/data', { test: "test" })
    .then(response => {
      console.log(response.data);
    });
},

我的 Symfony 控制器：

public function postData(Request $request)
{
    $data = $request->getContent();
    $data = json_decode($data, true);

    return $this->json($data);
}

Answer 5

你的语法没有错。但是检查 this.id - 如果你没有做任何错误并且 this.id 是未定义的，或者其他什么。如果 this.id 没问题，则在控制器中记录完整的请求并查找数据。

updateQuestion: function () {
  axios
  .post('/staff/question/api/' + this.id, {
    id: 'test',
    name: 'sree'
  })
  .then(response => {
    console.log(response)
  })
  .catch(error => {
    console.error(error)
  })
}