Axios: 无法在axios中发布数据

@awais-ilyas ，我认为您通常不会对 POST 有效负载进行字符串化。 试试这个：

...
axios({
method: 'post',
url: 'api/Application/Action/MyWebAPIMethod',
data: args,
});
...

应该在 POST 正文中设置data 。

我最近开始从使用 jQuery 进行 AJAX 工作转移到 Axios，只是因为它似乎风靡一时。 但是我很震惊地得知我不能做一个简单的 POST。

所以，这是我第一次尝试的：

axios.post('/api/event/item', {
    event_id: eventId,
    item_id: itemId,
    description: description
  })
  .catch(function (error) {
    console.log(error);
  });

在后端（使用 PHP）$_POST 完全是空的。 所以我做了一些谷歌搜索，这很有效（使用polyfill，叹息）：

const params = new URLSearchParams();
params.append('event_id', eventId);
params.append('item_id', itemId);
params.append('description', description);
axios({
  method: 'post',
  url: '/api/event/item',
  data: params
});

这行得通。 所以我需要使用URLSearchParams吗？ 好吧，这令人沮丧，因为文档表明第一种方法应该有效。

其他人有这个麻烦吗？

@dlgoodchild您是否尝试将其作为表单数据发送？ 我发现我的 POST 正文也是空的，但我不得不使用它来将其转换为类似 Form 的东西：

   ...
      data: params,
      transformRequest: [
        function(data, headers) {
          const serializedData = []

          for (const k in data) {
            if (data[k]) {
              serializedData.push(`${k}=${encodeURIComponent(data[k])}`)
            }
          }

          return serializedData.join('&')
        }
      ],
   ...

同意，POST 功能需要工作。

啊好方法！ 为了任何登陆这里的人的利益，最后我让它在 3 个变体中使用：

1. 表单数据
2. URL搜索参数
3. querystring.stringify（节点的一部分）

前 2 个选项的问题在于浏览器兼容性（请咨询 caniuse.com）。 最后是另一个依赖。

我不知道transformRequest选项，这看起来不错，如果您想最小化依赖关系并跨浏览器工作，特别是对于旧版本，这是一个很好的选择。

我认为文档是让许多人对 Axios 感到沮丧的原因。 与使用 Axios 进行 POST 相关的 StackOverflow 问题的数量很好地表明某处存在问题和普遍的误解。

有同样的问题 - 花了几个小时研究，终于找到了这个问题。 想法： POST 不应该很复杂，不应该需要依赖或额外的配置。 这感觉就像 AngularJS 1 又一次了。 我现在将继续使用这个库。

@yuri-wisestamp 完全同意，这是一个非常奇怪/不寻常的设计选择。 我现在基本上已经停止使用它了，因为我因为缺乏良好的文档从一开始就失去了调试它而失去了调试它的时间。

使用 Axios 和 PHP 发布是一场真正的噩梦！

我花了两个小时，没有得到任何结果...

非表单编码的帖子不会在 PHP 中填充 $_POST。 您必须阅读帖子正文：

$body = file_get_contents('php://input');

如果您期望 json：

$json=json_decode($body);

这段代码：

axios = require('axios');

var param = {
   args: {
      myStringVal: '979251e4-6c9f-460d-ba32-1b6fe58ce8a3'
   }
};

axios({
   method: 'post',
   url: 'http://home.test/post.php',
   data: param,
});

在服务器中对此进行处理：

<?php

$entityBody = file_get_contents('php://input');

file_put_contents(__DIR__ . '/output.txt', print_r(json_decode($entityBody), true));

产生了这个输出：

stdClass Object
(
    [args] => stdClass Object
        (
            [myStringVal] => 979251e4-6c9f-460d-ba32-1b6fe58ce8a3
        )

)

我这样解决了我的问题：

正面

✋userSearchParams() 并非在任何地方都有效（ https://caniuse.com/#search =URLSearchParams() ）

        let params = new URLSearchParams();
        params.append('email', this.email );
        params.append('url', userInfo.url );
        this.$http.post(
          'http://localhost:9999/api/record.php', params
          )
        .then((response) => {
          if (response.data.message === "success" )  this.$router.push( 'thankyou' );
        })
        .catch( (error) =>   console.log(error) ) ;

后退

print_r( $_POST ); 

// $_POST['email'] = '[email protected]'
// $_POST['url'] = 'http://google.fr'

我通过安装 qs 让我的工作。

          import qs from "qs";


        const params = {
            name: "User",
            startTime: "2:00PM",
            endTime: "3:00PM",
            status: "pending",
            invitation: "test",
        };

        axios.post("DOMAIN/event/new", qs.stringify(params))
            .then((response) => {
                console.log(response);
            })
            .catch((error) => {
                console.log(error);
            });

@Legym谢谢！ 我的 qs.stringify 也能正常工作！ 该死的，我正要停止使用 axios，因为我无法让我的 POST 请求正常工作！

非常感谢！

我实际上找到了一个更好的解决方案，而不需要外部库。 Post 请求标头设置为表单。 如果要发送 JSON 对象，则需要更改标头

        const params = {
            name: "User",
            startTime: "2:00PM",
            endTime: "3:00PM",
            status: "pending",
            invitation: "test",
        };

axios.post('DOMAIN/event/new', params, {
     headers: {
          'content-type': 'application/json',
     },
})

@Legym非常感谢！

我真的不明白为什么 POST 不起作用。 Legym 的标题不能为我修复它。
jquery 第一次尝试，所以我不知道发生了什么。

URLSearchParams 方法不适用于 macOS 中的 Safari。

有没有人能够通过 axios 发布文件和数据？
我正在使用 PHP 的 Laravel 框架。

@latanoil老实说，使用 axios 几乎没有好处。 最好坚持使用更简单、支持更好、文档更好的 Ajax 库。 Jquery 已经过尝试和测试，并且运行良好，您不会在这里发现任何问题。

感谢@dlgoodchild的建议。 我已经为此苦苦挣扎了几天。 我会坚持使用 jQuery。

axios({
  method: 'post',
  url: 'http://blahblahblah',
  params: {
    key1: value1,
    key2: value2
  }
})

以这种方式工作，使用 _params_，而不是 _data_

大声笑，我不敢相信这很难开始工作。

_this_ 基本的东西，_this_ ... _common_，应该不难。

@HellsingMatt nope对我不起作用。 您可能对 $_GET 感到困惑。 因为'params'是我用来让它为GET工作的。 但它不适用于我的POST。

@mallochine很有趣，我确实在 node.js 中使用 _params_ 和 POST

@HellsingMatt好的。 我正在使用 PHP。 看起来 axios 完全用 PHP 搞砸了。 你在使用 PHP 后端吗？

@mallochine 还没有学过 PHP，我所有的后端都使用 node.js

我正在使用 PHP。 没有问题。
在某些情况下，我需要 json（通常），所以我相应地设置了标题。 在我想要填充 $_POST 的情况下，我使用像 qs 这样的库或我自己的更小更简单的实现（它不能处理所有情况，但对我来说已经足够了）来转换为查询字符串。

有关此类功能的示例，请参见此 SO 帖子： https ://stackoverflow.com/a/1714899/6728516

Axios 的这个怪癖已经在主要文档中解决了很长时间，尽管可以承认它可能更具描述性。

我通常发现使用 JSON 的用途更加广泛，以至于我很少再这样做了。 有关在 PHP 中检索已发布 JSON 的方法，请参阅我上面的评论。

该死的地狱。

我不想破坏表单的标准 api 功能，所以不得不添加 fallback 。

if(empty($_POST['dep_date'])) {
    $body = file_get_contents('php://input');
    $json = json_decode($body, true);
    $_POST['dep_date'] = $json['dep_date'];
    .....

幸运的是，我可以访问 php 端，如果它是一些外部 api，我会是 §§§ 。 列出 vue 的所有 ajax 客户端时应该有关于此的警告:)

它使用“params”与我一起使用，我使用 PHP。
请注意，这是 nativescript-vue 2.0.0 中的 axios。

@HellsingMatt谢谢！

我通过安装 qs 让我的工作。

          import qs from "qs";


        const params = {
            name: "User",
            startTime: "2:00PM",
            endTime: "3:00PM",
            status: "pending",
            invitation: "test",
        };

        axios.post("DOMAIN/event/new", qs.stringify(params))
            .then((response) => {
                console.log(response);
            })
            .catch((error) => {
                console.log(error);
            });

磷

请您发布包含所有 cors 标头和内容类型的 php 后端代码。 我已经尝试过 axios 和 fetch 都不起作用。

这似乎是文档中的错误，但应该使用 params 对象，没有数据并且它正在工作。 我花了2个小时来理解它（（

轴（{
 方法：'发布'，
 网址：'网址'，
 参数：{
 核心价值
 }
 })

非常感谢丹尼尔。 我感谢您的帮助。 谢谢你让我知道
错误。

2018 年 11 月 10 日星期六上午 11:18 Daniil [email protected]写道：

这似乎是文档中的错误，但应该使用 params 对象，不
数据并且它正在工作。 我花了2个小时来理解它（（

轴（{
方法：'发布'，
url: '/wp-admin/admin-ajax.php?action=data_fetch',
参数：{
核心价值
}
})

—
您收到此消息是因为您发表了评论。
直接回复此邮件，在 GitHub 上查看
https://github.com/axios/axios/issues/1195#issuecomment-437612819或静音
线程
https://github.com/notifications/unsubscribe-auth/ApIWeUP45k17b70vsaT80KR1g_cxXcMvks5utyZzgaJpZM4Ql8j5
.

我这样解决了我的问题：

正面

✋userSearchParams() 并非在任何地方都有效（ https://caniuse.com/#search =URLSearchParams() ）

        let params = new URLSearchParams();
        params.append('email', this.email );
        params.append('url', userInfo.url );
        this.$http.post(
          'http://localhost:9999/api/record.php', params
          )
        .then((response) => {
          if (response.data.message === "success" )  this.$router.push( 'thankyou' );
        })
        .catch( (error) =>   console.log(error) ) ;

后退

print_r( $_POST ); 

// $_POST['email'] = '[email protected]'
// $_POST['url'] = 'http://google.fr'

很有帮助，谢谢！

axios({
  method: 'post',
  url: 'http://blahblahblah',
  params: {
    key1: value1,
    key2: value2
  }
})

以这种方式工作，使用 _params_，而不是 _data_

也适用于我，谢谢，更清洁的方法。

我已经使用基本 url 创建了一个 Axios 实例。

我想使用该实例发表一篇文章。 正确的设置是什么？

这有效：

    axios({
        method: "post",
        url: "https://slack.com/api/chat.postMessage",
        params: {
            token: this.token,
            channel: this.channel,
            text: "Testing API"
        },
        transformRequest: [
            (data, headers) => {
                console.log("data-in-transform", data);
                delete headers.post["Content-Type"];
                return data;
            }
        ]
    });

这不起作用：

    ax = axios.create({
        baseURL: `https://slack.com/api/`,
        params: {
            token: this.token,
            channel: this.channel
        },
        withCredentials: false,
        transformRequest: [
            (data, headers) => {
                delete headers.post["Content-Type"];
                return data;
            }
        ]
    });
        this.ax.post("chat.postMessage", {
            withCredentials: false,
            params: {
                text: "Testing API"
            },
            transformRequest: [
                (data, headers) => {
                    console.log("data-in-transform", data);
                    delete headers.post["Content-Type"];
                    return data;
                }
            ]
        });

我花了 15 天来解决这个问题 :( 这是代码

 Axios({

        method: apiMethod,
        url: root_url, // Api URL
        data: (apiMethod === 'POST')? Qs.stringify(apiParams) : undefined, // API post parameters,
        params:(apiMethod === 'get')? apiParams : undefined, //API get params
        headers:{
          'Accept': 'application/json',
          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
        },

    }).then(function (response) { // On Success
        console.log('Response', response.data );

        successCallback(response.status, response.data);
    })
    .catch(function (error) { // On Failure
        console.log('error', error);

        errorCallback(error.status, error.data);
    })
    .then(function () { // Always
        alwaysCallback(false);
    });

这简直太可怕了。 仅仅发送一个 POST 请求就进行了这么长时间的讨论，最后我们还没有具体的解决方案。

我面临同样的问题，已经花了 3 天。 尝试了所有可能的组合和选项，但仍然发现自己处于相同的情况。 所以我的后端也是用PHP写的，我也觉得axios POST和PHP结合有很大的问题，简直不能接受！！

jQuery 处理这些事情非常好，我将再次切换回它。 我不想仅仅为了发送 POST 请求而安装其他依赖项！

此外，线程在没有适当解决方案的情况下关闭！

它已被@awais-ilyas 关闭，如果可能的话，他最好重新打开它。

是的！ 但是线程并没有带我去任何地方。 使用 JSON 对象向 PHP 发送 POST 请求仍然很痛苦！ @dlgoodchild是否有任何解决方法，因为我是这个帖子的迟到者？

是的@emfluenceindia在这个线程中提到了很多不需要使用 JSON 的解决方法。

我看到他们。 这是否意味着仍然无法以 JSON 形式发布？

这个线程并不是关于发布 JSON 的。 将 JSON 作为帖子正文发布不是问题，该线程是关于使用 data: 属性，就像 jQuery 一样，并以某种方式在 PHP 中填充 $_POST。

我最近开始从使用 jQuery 进行 AJAX 工作转移到 Axios，只是因为它似乎风靡一时。 但是我很震惊地得知我不能做一个简单的 POST。

所以，这是我第一次尝试的：

axios.post('/api/event/item', {
    event_id: eventId,
    item_id: itemId,
    description: description
  })
  .catch(function (error) {
    console.log(error);
  });

在后端（使用 PHP）$_POST 完全是空的。 所以我做了一些谷歌搜索，这很有效（使用polyfill，叹息）：

const params = new URLSearchParams();
params.append('event_id', eventId);
params.append('item_id', itemId);
params.append('description', description);
axios({
  method: 'post',
  url: '/api/event/item',
  data: params
});

这行得通。 所以我需要使用URLSearchParams吗？ 好吧，这令人沮丧，因为文档表明第一种方法应该有效。

其他人有这个麻烦吗？

我今天遇到了这个问题，我花了将近一整天的时间。 它s weird because the document of axios told me to use first method which didn不起作用。 谢谢你，兄弟

你们放了吗
app.use(express.json())
在 app.js？

这应该足够了：

const formData = new FormData();
formData.append('action', 'some-action');
formData.append('page', 1);

axios
  .post('/async/index.php', formData, {
    retry: 3,
    retryDelay: 100,
  })
  .then(res => {
    console.log('get', res.data);
  })
  .catch(console.log);

PHP

print_r($_POST);

答案是添加以下内容。 Axios 默认使用 url-form-encoded。

headers: {
  "Content-Type": "text/plain"
}

这些解决方案都不适合我，我认为这是因为对于 node.js 用户，自述文件具有误导性，因为您_必须有一个数据对象_用于发布请求，因为配置对象是传入的_第三个参数_。 .post函数有这个接口

post(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise;

所以你必须像这样调用.post函数

await axios.post(
 `http://localhost:3000/your/path/here`,
 {},
 {
   params: {
     ID: 12345,
     name: 'testUser',
   },
 },
);

@NathanielRN这个解决方案有效，但不是最优的。 它将所有参数附加到 url。 类似于“得到”。

@NathanielRN这个解决方案有效，但不是最优的。 它将所有参数附加到 url。 类似于“得到”。

@nicolardi抱歉，我对 url 请求性能不太熟悉。 虽然将参数添加到 url 不是最优的？ 即使它就像一个“得到”？

Axios 是最著名的客户端，但它有这样一个缺陷。 令人失望。

重新开放调查

事情是这样的：问题不在于 Axios。 如果您使用具有相同参数的 cURL 或 Postman（方法：Post，Body：{"something":"value"}，headers 设置为 json）它可以工作。 但是，如果您在 Vue、React、Angular（无论如何）中使用 Axios 甚至 Fetch API 执行此操作，您将看到您的 Chrome 或（任何其他浏览器）“更改”请求方法（请参阅网络选项卡）为 OPTIONS 而不是不再发布。 其背后的原因是……CORS（跨域资源共享）。 我发现它是因为我正在使用 NestJS 制作我的 API，但我忘记启用 CORS。 启用后，请求方法将保留为 POST（如我们所愿），Axios 将能够返回您的 JSON（或任何其他格式）。 一些框架会自动设置 CORS（例如 Laravel），而其他框架则必须手动设置/启用它。

这应该足够了：

const formData = new FormData();
formData.append('action', 'some-action');
formData.append('page', 1);

axios
  .post('/async/index.php', formData, {
    retry: 3,
    retryDelay: 100,
  })
  .then(res => {
    console.log('get', res.data);
  })
  .catch(console.log);

PHP

print_r($_POST);

@jonataswalker的解决方案是使用 Axios 处理 POST 的最佳方法。 使用 FormData() 对我有用。

所以我有同样的问题。 我在前面使用 Vue.js，我发现自从我更新到最后一个版本（axios 和 vue）后，我无法以任何方式发送数据。 在我的上一个项目中，我可以以任何格式发送数据。

在旧版本中运行良好，而在更新后则根本无法运行。

axios.post('/actions/posts/create_questionnaire' , { questionnaire : form })

我的建议是，如果帖子不起作用，请尝试使用旧版本的 axios 和您正在使用的框架。

我在 django 后端遇到了这个问题。 幸运的是，我有一个使用 GET 的解决方法，但 axios.post 绝对不能像记录的那样工作。

可能不是axios问题而是cors问题。
如果您从节点服务器发布到 php 后端，那么您的 php 脚本需要有 cors：

https://stackoverflow.com/a/55392661

也不要使用 $_POST 但 $data = file_get_contents('php://input');

这似乎可以在 PHP 中检索 $_POST 值：

    axios.post(url, {test: 'dafasfasfa'},{
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            "Access-Control-Allow-Origin": "*"
        }
    })

我终于使用@alvarotrigo和@latanoel的想法组合使用了这样的django后端（安装和配置了cors）：

const formData = new FormData();
formData.append('a1', this.form.a1);
formData.append('a2', this.form.a2);
formData.append('a3', this.form.a3);

axios
  .post(url, formData, {
    headers: {
      'Content-type': 'application/x-www-form-urlencoded',
    }
  })
etc

当您按照文档建议包含 POST args inline 时，后端的 POST 为空。 此外，您不能设置 Access-Control-Allow-Origin，因为这违反了 cors。

另外，也可以使用这种方法
const paramsCompose = (formData) => { const str = []; for (let p in formData) { str.push(encodeURIComponent(p) + '=' + encodeURIComponent(formData[p])); } const body = str.join('&'); console.log('PARAMS ' + body); return body; };

那么你 ...
return axios.post(url, paramsCompose({ image_url: image_url, cover_name: cover_name })) .then(res => { const tx = res.data; console.log(tx); return res.data });

几天后，尝试了所有以前的选项......我仍然没有成功解决问题。

事实上，我们拥有的是：

• Axios 'post' 方法不像记录的那样工作；
• 使用 Axios 对 REST 服务执行简单的“发布”调用变成了地狱；

我简直不敢相信这是严重的......对不起，但我会回来使用另一个 API。 再见 Axios。

@fabriciobraga我试图弄清楚为什么我的应用程序也会发生这种情况。 我花了一整天的时间在互联网上寻找解决方案。 但是，我发现这是一个非常简单的问题。 我的用户创建action起初看起来像这样：

createUser(context, user) {
    this.$axios.$post("/api/users/", user).then(response => {
      context.dispatch("fetchUsers");
    });
 }

user参数有一个包含新用户的email和password的对象。 我试图console.log用户对象，它报告属性未定义！ 🤔

所以我在将用户对象传递给$post方法时传播了它，现在它可以工作了！

 this.$axios.$post("/api/users/", {...user})

在我的情况下，用户对象被作为空对象发送，我的 API 报告它是这样的。 如果你面临同样的问题，也许你应该试试这个。

另一种可能的情况是您的数据发送得很好，但不是您的 API 所期望的格式（例如，PHP 脚本的常见格式是 form-data，而大多数 Node.js API 都需要 JSON）。 所以你需要弄清楚这一点； 见上面的讨论。

显然有同样的问题
axios.post("api", { API: 1, version: "0.1b"...})....
到达我的 Java 休息服务器时，API 和版本为空。
当它作为第三个参数发送时，即
axios.post("api", null, { params: {API: 1, version: "0.1b"...}})....
它按预期工作

这是评论最多和开放的问题之一。 相信我，我已经阅读了这个帖子中的每一条评论。 很多用户对如何通过 axios 发布数据感到困惑。 有人给出了他们的命中或结论，新用户又错过了他们的方向。

请记住，axios 只是一个请求客户端。 如果您没有看到预期的响应，请检查 axios 发送的内容是否与服务器的预期相符。 这是我解决 post 甚至所有 axios 问题的主要步骤。 我也希望用户可以通过回答以下问题来打开问题。 也许稍后更新问题模板。

1. 你在哪一边运行你的代码？ 浏览器或服务器端。
2. 您要发送哪些参数？ 应该使用config.params还是config.data ？
3. 如果params ，如何编码？ 默认的config.paramsSerializer是否足够或应该使用自定义？
4. 如果data ，您是否使用正确的content-type标头对它们进行了编码？ 大多数帖子问题在这里都失败了。
   
   
   
   1. 标头application/json需要JSON.stringify标头application/x-www-form-urlencoded需要qs.stringify 。
   
   
   2. 默认的config.transformRequest将为 URLSearchParams 设置application/x-www-form-urlencoded ，为 Javascript 对象设置application/json 。 请检查lib/defaults.js中的源代码以获得准确的理解。
   
   
5. 您是否遇到过其他问题，例如 CORS/ATS/Promises，并且知道如何解决它们？

我知道它们看起来很复杂，我打算写一个尽可能详细的教程来解释。 但我不是母语人士，有点担心我的文章水平。 请原谅我将其锁定，请等待我或社区中的某个人提供一份写得很好的文件。 这是开源的。 我们需要每个人的贡献。