Axios: No se pueden publicar datos en axios

@awais-ilyas, no creo que normalmente encadenes la carga útil de POST. Prueba esto:

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

Lo que debería establecer el data en el cuerpo POST.

Recientemente comencé a pasar de usar jQuery para el trabajo AJAX a Axios, solo porque parece estar de moda. Pero me sorprendió saber que no puedo hacer un POST simple.

Entonces, esto es lo que probé por primera vez:

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

En el backend (usando PHP) $_POST estaba completamente vacío. Así que busqué en Google y esto funciona (con el uso de un polyfill, suspiro):

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
});

Esto funciona. Entonces, ¿necesito usar URLSearchParams ? Bueno, esto fue frustrante porque los documentos muestran que el primer método debería funcionar.

¿Alguien más tiene este problema?

@dlgoodchild ¿Está intentando enviarlo como datos de formulario? Descubrí que mi cuerpo POST también estaba vacío, pero tuve que usar esto para transformarlo en algo parecido a un formulario:

   ...
      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('&')
        }
      ],
   ...

De acuerdo, la funcionalidad POST necesita trabajo.

Ahh buen enfoque! Para los beneficios de cualquiera que aterrice aquí, al final lo conseguí usando en 3 variantes:

1. Formulario de datos
2. URLSearchParams
3. querystring.stringify (parte de Node)

El problema con las 2 primeras opciones es la compatibilidad del navegador (consulte con caniuse.com). La última es otra dependencia.

No conocía la opción transformRequest , se ve bien y es una excelente opción si desea minimizar las dependencias y trabajar en varios navegadores, especialmente para versiones anteriores.

Creo que la documentación es lo que hace que Axios sea frustrante para muchas personas. La cantidad de preguntas de StackOverflow relacionadas con POST usando Axios es una buena indicación de que hay un problema en alguna parte y un malentendido general.

Tiene el mismo problema: pasé algunas horas investigando y finalmente encontré este problema. Pensamientos: POST no debería ser complicado y no debería requerir dependencias o configuración adicional. Esto se siente como AngularJS 1 de nuevo. Dejaré de usar esta biblioteca por ahora.

@yuri-wisestamp no podría estar más de acuerdo, es una elección de diseño muy extraña/poco común. En su mayoría, he dejado de usarlo ahora porque me sentí rechazado por las horas que perdí depurándolo debido a la falta de buena documentación para presentar esto desde el principio.

¡Publicar con Axios y PHP es una verdadera pesadilla!

Pasé dos horas, sin obtener ningún resultado...

Las publicaciones sin codificación de formulario no completan $_POST en PHP. Tienes que leer el cuerpo de la publicación:

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

si esperas json:

$json=json_decode($body);

Este código:

axios = require('axios');

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

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

Contra esto en el servidor:

<?php

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

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

Produjo esta salida:

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

)

Arreglé mi problema así:

Parte delantera

✋userSearchParams() no funciona en todas partes ( 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) ) ;

atrás

print_r( $_POST ); 

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

Conseguí que el mío funcionara instalando 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 ¡Gracias! ¡Obtuve el mío funcionando también con qs.stringify! ¡Maldita sea, estaba a punto de dejar de usar axios ya que no podía hacer que mis solicitudes POST funcionaran correctamente!

¡Muchas gracias!

De hecho, encontré una solución mejor sin la necesidad de una biblioteca externa. El encabezado de la solicitud de publicación se establece en formulario. Deberá cambiar el encabezado si está enviando un objeto 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 ¡ Muchas gracias!

Realmente no entiendo por qué POST no funciona. Los encabezados de Legym no me lo arreglan.
jquery funcionó en el primer intento, así que no sé qué está pasando.

El enfoque de URLSearchParams no funciona para Safari en macOS.

¿Alguien ha podido PUBLICAR un archivo y datos a través de axios?
Estoy usando el marco Laravel de PHP.

@latanoil honestamente, hay pocas o ninguna ventaja en el uso de axios. Lo mejor es apegarse a una biblioteca Ajax más simple, mejor respaldada y mejor documentada. Jquery está probado y probado y funciona perfectamente bien y no tendrá ninguno de los problemas que se encuentran aquí.

Gracias @dlgoodchild por el consejo. He luchado con esto durante un par de días. Me limitaré a jQuery.

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

trabaje de esta manera, use _params_, no _data_

LOL, no puedo creer que esto haya sido tan difícil de hacer funcionar.

Algo _esto_ básico, _esto_ ... _común_, NO debería ser difícil.

@HellsingMatt no, no funcionó para mí. Es posible que lo hayas confundido con $_GET. Porque 'params' es lo que usé para que funcione para GET. Pero no me funcionó con POST.

@mallochine interesante, uso _params_ con POST en node.js

@HellsingMatt está bien. Estoy usando PHP. Parece que axios se caga completamente con PHP. ¿Está utilizando el backend de PHP?

@mallochine nunca aprendió PHP todavía, todo mi backend usa node.js

Estoy usando PHP. Sin problemas.
En algunos casos, quiero json (generalmente), así que configuro el encabezado en consecuencia. En los casos en los que quiero que se complete $ _POST, uso una biblioteca como qs o mi propia implementación más pequeña y simple (que no manejaría todos los casos pero es adecuada para mí) para convertir a una cadena de consulta.

Consulte esta publicación SO para ver un ejemplo de una de esas funciones: https://stackoverflow.com/a/1714899/6728516

Esta peculiaridad de Axios se ha abordado en la documentación principal durante mucho tiempo, aunque es cierto que podría ser un poco más descriptivo.

En general, encuentro que usar JSON es mucho más versátil que rara vez lo hago por más tiempo. Vea mi comentario anterior para conocer un método para recuperar el JSON publicado en PHP.

Infierno sangriento.

No quería romper la funcionalidad API estándar para formularios, así que tuve que agregar fallback .

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

Afortunadamente, tuve acceso al lado de php, si fuera una API externa, sería §§§. Debería haber una advertencia sobre esto al enumerar todos los clientes de ajax para vue :)

Funciona conmigo usando "parámetros", y uso PHP con esto.
Tenga en cuenta que esto es axios dentro de nativescript-vue 2.0.0.

@HellsingMatt ¡Gracias!

Conseguí que el mío funcionara instalando 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);
            });

PAGS

Por favor, ¿puede publicar el código backend de php con todos los encabezados cors y el tipo de contenido? He intentado tanto axios como fetch y ambos no funcionan.

Parece un error en la documentación, pero debería usar el objeto params, sin datos y está funcionando. He tardado 2 horas en entenderlo((

 axios({
 método: 'publicar',
 URL: 'URL',
 parámetros: {
 valor clave
 }
 })

Muchas gracias Daniil. Aprecio tu ayuda. Gracias por hacerme saber el
error.

El sábado 10 de noviembre de 2018 a las 11:18 a. m. Daniil [email protected] escribió:

Parece un error en la documentación, pero debería usar el objeto params, no
datos y está funcionando. He tardado 2 horas en entenderlo((

axios({
método: 'publicar',
url: '/wp-admin/admin-ajax.php?action=data_fetch',
parámetros: {
valor clave
}
})

—
Estás recibiendo esto porque comentaste.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/axios/axios/issues/1195#issuecomment-437612819 , o silenciar
la amenaza
https://github.com/notifications/unsubscribe-auth/ApIWeUP45k17b70vsaT80KR1g_cxXcMvks5utyZzgaJpZM4Ql8j5
.

Arreglé mi problema así:

Parte delantera

✋userSearchParams() no funciona en todas partes ( 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) ) ;

atrás

print_r( $_POST ); 

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

¡Ayuda mucho, gracias!

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

trabaje de esta manera, use _params_, no _data_

funciona para mí también gracias, un enfoque mucho más limpio.

Tengo una instancia de Axios ya creada con la URL base.

Quiero hacer una publicación usando esa instancia. ¿Cuál es la configuración correcta?

Esto funciona:

    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;
            }
        ]
    });

Esto no funciona:

    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;
                }
            ]
        });

Pasé 15 días para resolver este problema :( Aquí está el código

 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);
    });

Eso es simplemente horrible. Una discusión tan larga por solo enviar una solicitud POST y al final aún no tenemos una solución concreta.

Estoy enfrentando el mismo problema y ya pasé 3 días. Intenté todas las combinaciones y opciones posibles y aún me encuentro en la misma situación. Por lo tanto, mi backend también está escrito en PHP, también siento que axios tiene problemas importantes con la combinación de POST y PHP, ¡que simplemente no se acepta!

jQuery maneja estas cosas excepcionalmente bien y voy a volver a utilizarlo. ¡No quiero instalar dependencias adicionales solo por enviar una solicitud POST!

Además, ¡el hilo se cierra sin una solución adecuada!

Fue cerrado por @awais-ilyas, idealmente debería reabrirlo, si eso es posible.

¡Sí! Pero el hilo no me lleva a ninguna parte. ¡Enviar una solicitud POST a PHP usando un objeto JSON sigue siendo un dolor! @dlgoodchild , ¿hay alguna solución ya que llegué tarde a este hilo?

sí, @emfluenceindia , hay muchas soluciones alternativas mencionadas en este hilo que no requieren el uso de JSON.

Los vi. ¿Significa esto que todavía no es posible POST como JSON?

Este hilo no se trata realmente de publicar JSON. Publicar JSON como un cuerpo de publicación no es un problema, este hilo trata sobre el uso de los datos: atributo, como con jQuery y hacer que de alguna manera llene $_POST en PHP.

Recientemente comencé a pasar de usar jQuery para el trabajo AJAX a Axios, solo porque parece estar de moda. Pero me sorprendió saber que no puedo hacer un POST simple.

Entonces, esto es lo que probé por primera vez:

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

En el backend (usando PHP) $_POST estaba completamente vacío. Así que busqué en Google y esto funciona (con el uso de un polyfill, suspiro):

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
});

Esto funciona. Entonces, ¿necesito usar URLSearchParams ? Bueno, esto fue frustrante porque los documentos muestran que el primer método debería funcionar.

¿Alguien más tiene este problema?

Me encontré con este problema hoy y he pasado casi un día entero en esto. s weird because the document of axios told me to use first method which didn funciona. gracias, hermano

ustedes pusieron
aplicación.use(express.json())
en la aplicación.js?

Esto debería ser suficiente:

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);

La respuesta es agregar lo siguiente. Axios usa url-form-encoded de forma predeterminada.

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

Ninguna de estas soluciones funcionó para mí, y creo que es porque para los usuarios de node.js, README es engañoso porque _debe tener un objeto de datos_ para las solicitudes posteriores porque el objeto de configuración es el _3er argumento_ pasado. El .post función tiene esta interfaz

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

entonces debes llamar a la función .post así

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

@NathanielRN esta solución funciona pero no es óptima. Agrega todos los parámetros a la url. Similar al "obtener".

@NathanielRN esta solución funciona pero no es óptima. Agrega todos los parámetros a la url. Similar al "obtener".

@nicolardi Lo siento, no estoy muy familiarizado con el rendimiento de la solicitud de URL. ¿Agregar los parámetros a la URL no es óptimo? Incluso si es como un "get"?

Axios es el cliente más famoso que existe, pero tiene ese defecto. Decepcionante.

Reapertura para investigación

Aquí está la cosa: el problema no es con Axios. Si usa cURL o Postman con los mismos parámetros (método: Publicación, Cuerpo: {"algo":"valor"}, encabezados establecidos en json), funciona. Sin embargo, si lo hace usando Axios o incluso Fetch API en su Vue, React, Angular (lo que sea), verá que su Chrome o (cualquier otro navegador) "cambia" el Método de solicitud (consulte la pestaña Red) a OPCIONES y NO PUBLICAR más. La razón detrás de esto es... CORS (intercambio de recursos de origen cruzado). Lo descubrí porque estoy creando mi API usando NestJS y olvidé habilitar CORS. Cuando está habilitado, el método de solicitud se mantiene como POST (como deseábamos) y Axios podrá devolver su JSON (o cualquier otro formato). Algunos marcos configuran el CORS automáticamente (por ejemplo, Laravel) mientras que otros debe configurarlo/habilitarlo manualmente.

Esto debería ser suficiente:

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);

La solución de @jonataswalker es el mejor enfoque para manejar POST usando Axios. Usar FormData() funcionó para mí.

por lo que tengo tipo de la misma problome. estoy usando Vue.js para mi frente y descubrí que desde que hice la actualización a la última versión (axios y vue) no puedo enviar los datos de ninguna manera. en mi último proyecto pude enviar datos en cualquiera de los formatos.

En versiones anteriores funciona bien y en la actualizada no funciona en absoluto.

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

mi consejo si la publicación no funciona, intente usar una versión anterior de axios y el freamwork que está usando.

Me encontré con este problema con un backend de django. Afortunadamente tengo una solución usando GET pero axios.post definitivamente no funciona como está documentado.

Puede ser que no sea un problema de axios sino de cors.
Si está publicando desde el servidor del nodo al backend de php, entonces su secuencia de comandos php debe tener cors:

https://stackoverflow.com/a/55392661

y tampoco use $_POST sino $data = file_get_contents('php://input');

Esto parece estar funcionando para recuperar el valor de $_POST en PHP:

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

Finalmente conseguí que esto funcionara con un backend de django (con cors instalado y configurado) como este, usando una combinación de las ideas de @alvarotrigo y @latanoel :

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

Cuando incluye los argumentos POST en línea como sugieren los documentos, POST está vacío en el backend. Además, no puede configurar Access-Control-Allow-Origin porque viola cors.

Además, usa este método también
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; };

Entonces tú ...
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 });

Después de unos días y de probar todas las opciones anteriores... sigo sin conseguir solucionar el problema.

Lo que tenemos, de hecho es:

• El método 'post' de Axios no funciona como está documentado;
• Ejecutar una simple llamada 'post' a un servicio REST se convirtió en un infierno, usando Axios;

Simplemente no puedo creer que sea serio... lo siento, pero volveré a usar otra API. Adiós Axios.

@fabriciobraga Estaba tratando de averiguar por qué esto también estaba sucediendo en mi aplicación. Pasé todo el día buscando en Internet la solución. Sin embargo, descubrí que era un problema muy simple. Mi creación de usuario action se veía así al principio:

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

El parámetro user es un objeto que contiene los email y password del nuevo usuario. Intenté console.log el objeto de usuario e informó que las propiedades no estaban definidas. 🤔

Así que distribuí el objeto de usuario cuando lo pasé al método $post y ¡ahora funciona!

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

En mi caso, el objeto de usuario se enviaba como un objeto vacío y mi API informó que así era. Si estás enfrentando el mismo problema, tal vez deberías probar esto.

Otro escenario posible es que sus datos se envíen bien, pero no en el formato que espera su API (por ejemplo, un formato común para los scripts de PHP son los datos de formulario, mientras que la mayoría de las API de Node.js esperan JSON). Así que necesitas resolver esto; vea las discusiones arriba .

Aparentemente tiene el mismo problema
axios.post("api", { API: 1, version: "0.1b"...})....
Resultados con API y versión vacías al llegar a mi servidor de descanso de Java.
Al enviarlo como el tercer parámetro, es decir
axios.post("api", null, { params: {API: 1, version: "0.1b"...}})....
Funciona como se esperaba

Este es uno de los temas más comentados y abiertos. Créanme que he leído todos los comentarios de este hilo. Muchos usuarios se confundieron sobre cómo publicar datos por axios. Alguien dio sus aciertos o conclusiones y los nuevos usuarios volvieron a perder sus direcciones.

Recuerde que axios es solo un cliente de solicitud. Si no vio la respuesta esperada, compruebe si lo que envía axios coincide con lo que espera el servidor. Estos son mis pasos principales para resolver problemas de publicación o incluso todos los problemas de axios. Y también espero que los usuarios puedan abrir un problema con las siguientes preguntas respondidas. Tal vez actualice la plantilla de problemas más tarde.

1. ¿De qué lado ejecutaste tus códigos? El navegador o el lado del servidor.
2. ¿Qué parámetros quieres enviar? ¿Debería usar config.params o config.data ?
3. Si params , ¿cómo codificarlos? ¿Es suficiente el config.paramsSerializer predeterminado o debería usar uno personalizado?
4. Si data , ¿los codificó con el encabezado correcto content-type ? La mayoría de los problemas de publicación fallaron aquí.
   
   
   
   1. El encabezado application/json requiere JSON.stringify y el encabezado application/x-www-form-urlencoded requiere qs.stringify .
   
   
   2. El valor predeterminado config.transformRequest establecerá application/x-www-form-urlencoded para URLSearchParams y application/json para objetos Javascript. Verifique los códigos fuente en lib/defaults.js para obtener información precisa.
   
   
5. ¿Se encontró con otros problemas, es decir, CORS/ATS/Promises, y supo cómo resolverlos?

Sé que parecen complejos y planeo escribir un tutorial que explique lo más detallado posible. Pero no soy un hablante nativo y estoy un poco preocupado por el nivel de mi artículo. Perdone que lo bloquee y por favor espere a que yo o alguien de la comunidad entregue un documento bien escrito. Esto es de código abierto. Necesitamos la contribución de todos.