Axios: Não é possível POSTAR dados em axios

@awais-ilyas , eu não acho que você normalmente stringificaria a carga útil POST. Tente isto:

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

Que deve definir o data no corpo do POST.

Recentemente, comecei a passar do uso do jQuery para trabalho AJAX para o Axios, apenas porque parece estar na moda. Mas fiquei chocado ao saber que não posso fazer um simples POST.

Então, aqui está o que eu tentei primeiro:

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

No backend (usando PHP) $_POST estava completamente vazio. Então eu fiz uma pesquisa no Google, e isso funciona (com o uso de um 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
});

Isso funciona. Então eu preciso usar URLSearchParams ? Bem, isso foi frustrante porque os documentos mostram que o primeiro método deve funcionar.

Alguém mais tendo esse problema?

@dlgoodchild Você está tentando enviá-lo como dados de formulário? Descobri que meu corpo POST também estava vazio, mas tive que usar isso para transformá-lo em algo do tipo 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('&')
        }
      ],
   ...

Concordo, a funcionalidade POST precisa funcionar.

Ahh boa abordagem! Para os benefícios de quem chega aqui, no final consegui trabalhar usando em 3 variantes:

1. Dados do formulário
2. URLSearchParams
3. querystring.stringify (parte do Node)

O problema com as 2 primeiras opções é a compatibilidade do navegador (verifique com caniuse.com). A última é outra dependência.

Eu não estava ciente da opção transformRequest , isso parece bom e é uma ótima opção se você deseja minimizar dependências e trabalhar entre navegadores, especialmente para versões mais antigas.

Acho que a documentação é o que torna o Axios frustrante para muitas pessoas. O número de perguntas do StackOverflow relacionadas ao POST usando o Axios é uma boa indicação de que há um problema em algum lugar e um mal-entendido geral.

Tenho o mesmo problema - passei algumas horas pesquisando, finalmente encontrei esse problema. Pensamentos: O POST não deve ser complicado e não deve exigir dependências ou configuração extra. Isso parece AngularJS 1 novamente. Vou passar a usar esta biblioteca por enquanto.

@yuri-wisestamp não poderia concordar mais, é uma escolha de design muito estranha / incomum. Eu parei de usá-lo principalmente agora, pois me senti rejeitado pelas horas que perdi depurando-o devido à falta de boa documentação para apresentar isso desde o início.

Post com Axios e PHP é um verdadeiro pesadelo!

Fiquei duas horas, sem obter nenhum resultado...

Postagens não codificadas por formulário não preenchem $_POST em PHP. Você tem que ler o corpo do post:

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

se você espera 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 isso no servidor:

<?php

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

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

Produziu esta saída:

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

)

Resolvi meu problema assim:

Frente

✋userSearchParams() não funciona em todos os lugares ( 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) ) ;

Costas

print_r( $_POST ); 

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

Eu fiz o meu funcionar 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 Obrigado! Eu tenho o meu funcionando bem com qs.stringify! Porra, eu estava prestes a parar de usar axios, pois não conseguia fazer minhas solicitações POST funcionarem corretamente!

Muito Obrigado!

Na verdade, encontrei uma solução melhor sem a necessidade de uma biblioteca externa. O cabeçalho da solicitação de postagem está definido como formulário. Você precisará alterar o cabeçalho se estiver enviando um 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 Muito obrigado!

Eu realmente não entendo porque POST não funciona. Os cabeçalhos do Legym não resolvem isso para mim.
jquery funcionou primeiro tente, então eu não sei o que está acontecendo.

A abordagem URLSearchParams não funciona para o Safari no macOS.

Alguém conseguiu POSTAR um arquivo e dados via axios?
Estou usando o framework Laravel do PHP.

@latanoil honestamente, há pouca ou nenhuma vantagem em usar axios. Melhor ficar com uma biblioteca Ajax mais simples, melhor suportada e melhor documentada. Jquery é testado e testado e funciona perfeitamente bem e você não terá nenhum dos problemas encontrados aqui.

Obrigado @dlgoodchild pelo conselho. Eu tenho lutado com isso por um par de dias agora. Vou ficar com jQuery.

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

trabalhe desta forma, use _params_, não _data_

LOL Eu não posso acreditar que isso foi tão difícil de começar a trabalhar.

Algo _este_ básico, _este_ ... _comum_, NÃO deve ser difícil.

@HellsingMatt não funcionou para mim. É possível que você tenha confundido isso com $_GET. Porque 'params' é o que eu usei para fazê-lo funcionar para GET. Mas não funcionou para mim com POST.

@mallochine interessante, eu uso _params_ com POST em node.js

@HellsingMatt ok. Estou usando PHP. Parece que o axios estraga completamente com o PHP. Você está usando o backend PHP?

@mallochine nunca aprendeu PHP ainda, todo o meu backend usando node.js

Estou usando PHP. Sem problemas.
Em alguns casos, eu quero json (geralmente), então defino o cabeçalho de acordo. Nos casos em que quero $_POST preenchido, uso uma biblioteca como qs ou minha própria implementação menor e mais simples (que não lidaria com todos os casos, mas é adequada para mim) para converter em uma string de consulta.

Veja esta postagem SO para obter um exemplo de uma dessas funções: https://stackoverflow.com/a/1714899/6728516

Essa peculiaridade do Axios foi abordada na documentação principal por um longo tempo, embora reconhecidamente possa ser um pouco mais descritiva.

Eu geralmente acho o uso de JSON muito mais versátil que raramente faço isso por mais tempo. Veja meu comentário acima para um método para recuperar o JSON postado em PHP.

Puta merda.

Eu não queria quebrar a funcionalidade padrão da API para formulários, então tive que adicionar fallback .

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

Felizmente eu tive acesso ao lado do php, se fosse alguma API externa eu seria §§§ . Deve haver um aviso sobre isso ao listar todos os clientes ajax para vue :)

Ele funciona comigo usando "params", e eu uso PHP com isso.
Observe que isso é axios dentro do nativescript-vue 2.0.0.

@HellsingMatt Obrigado!

Eu fiz o meu funcionar 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);
            });

P

Por favor, você pode postar o código backend php com todos os cabeçalhos cors e tipo de conteúdo. Eu tentei ambos os axios e buscar ambos não estão funcionando.

Parece um erro na documentação, mas deve usar o objeto params, sem dados e está funcionando. Eu gastei 2 horas para entender isso ((

 axios({
 método: 'postar',
 url: 'url',
 parametros: {
 valor chave
 }
 })

Muito obrigado Danilly. Eu aprecio sua ajuda. Obrigado por me informar o
erro.

Em sáb, 10 de novembro de 2018 às 11:18 Daniil [email protected] escreveu:

Parece um erro na documentação, mas deve usar o objeto params, não
dados e está funcionando. Eu gastei 2 horas para entender isso ((

axios({
método: 'postar',
url: '/wp-admin/admin-ajax.php?action=data_fetch',
parametros: {
valor chave
}
})

—
Você está recebendo isso porque comentou.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/axios/axios/issues/1195#issuecomment-437612819 ou silenciar
o segmento
https://github.com/notifications/unsubscribe-auth/ApIWeUP45k17b70vsaT80KR1g_cxXcMvks5utyZzgaJpZM4Ql8j5
.

Resolvi meu problema assim:

Frente

✋userSearchParams() não funciona em todos os lugares ( 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) ) ;

Costas

print_r( $_POST ); 

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

Ajudou muito, obrigado!

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

trabalhe desta forma, use _params_, não _data_

funciona para mim também, obrigado, abordagem muito mais limpa.

Eu tenho uma instância do Axios já criada com a url base.

Eu quero fazer um post usando essa instância. Qual é a configuração correta?

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

Isso não 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;
                }
            ]
        });

Passei 15 dias para resolver esse problema :( Aqui está o 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);
    });

Isso é simplesmente horrível. Uma discussão tão longa para apenas enviar uma solicitação POST e no final ainda não temos uma solução concreta.

Estou enfrentando o mesmo problema e já passei 3 dias. Tentei todas as combinações e opções possíveis e ainda me encontrei na mesma situação. Portanto, meu backend também é escrito em PHP, também sinto que axios tem grandes problemas com a combinação POST e PHP, o que simplesmente não é aceito!

jQuery lida com essas coisas excepcionalmente bem e vou voltar a ele novamente. Não quero instalar dependências adicionais apenas para enviar uma solicitação POST!

Além disso, o tópico está fechado sem uma solução adequada !!

Foi fechado por @awais-ilyas, ele deveria reabri-lo idealmente, se for possível.

Isso! Mas o fio não me leva a lugar nenhum. Enviar uma solicitação POST para PHP usando o objeto JSON ainda é uma dor! @dlgoodchild existe alguma solução alternativa, já que cheguei tarde a este tópico?

sim @emfluenceindia existem muitas soluções alternativas mencionadas neste tópico que não requerem o uso de JSON.

Eu os vi. Isso significa que ainda não é possível POSTAR como JSON?

Este tópico não é realmente sobre postar JSON. Postar JSON como um corpo de postagem não é um problema, este tópico é sobre usar o atributo data:, como com jQuery e ter que de alguma forma preencher $ _POST em PHP.

Recentemente, comecei a passar do uso do jQuery para trabalho AJAX para o Axios, apenas porque parece estar na moda. Mas fiquei chocado ao saber que não posso fazer um simples POST.

Então, aqui está o que eu tentei primeiro:

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

No backend (usando PHP) $_POST estava completamente vazio. Então eu fiz uma pesquisa no Google, e isso funciona (com o uso de um 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
});

Isso funciona. Então eu preciso usar URLSearchParams ? Bem, isso foi frustrante porque os documentos mostram que o primeiro método deve funcionar.

Alguém mais tendo esse problema?

Eu encontrei esse problema hoje e passei quase um dia inteiro nisso. s weird because the document of axios told me to use first method which didn não funciona. obrigado, mano

vocês colocaram
app.use(express.json())
no app.js?

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

A resposta é adicionar o seguinte. O Axios usa codificação de formulário de URL por padrão.

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

Nenhuma dessas soluções funcionou para mim, e acho que é porque para usuários do node.js o README é enganoso porque você _deve ter um objeto de dados_ para solicitações de postagem porque o objeto de configuração é o _3º argumento_ passado. O .post função tem essa interface

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

então você deve chamar a função .post assim

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

@NathanielRN esta solução funciona, mas não é a ideal. Ele anexa todos os parâmetros ao URL. Semelhante ao "obter".

@NathanielRN esta solução funciona, mas não é a ideal. Ele anexa todos os parâmetros ao URL. Semelhante ao "obter".

@nicolardi Desculpe, não estou muito familiarizado com o desempenho da solicitação de URL. Enquanto adicionar os parâmetros ao URL não é o ideal? Mesmo que seja como um "get"?

Axios é o cliente mais famoso do mercado, mas tem uma falha tão grande. Decepcionante.

Reabertura para investigação

Aqui está a coisa: o problema não é com o Axios. Se você usar cURL ou Postman com os mesmos parâmetros (método: Post, Corpo: {"algo":"valor"}, cabeçalhos definidos como json) funciona. No entanto, se você fizer isso usando Axios ou mesmo Fetch API em seu Vue, React, Angular (qualquer que seja), você verá seu Chrome ou (qualquer outro navegador) "alterando" o Método de solicitação (consulte a guia Rede) para OPÇÕES e NÃO POSTAR mais. A razão por trás disso é... CORS (compartilhamento de recursos de origem cruzada). Descobri porque estou fazendo minha API usando NestJS e esqueci de habilitar o CORS. Quando habilitado, o Request Method é mantido como POST (como desejávamos) e o Axios poderá retornar seu JSON (ou qualquer outro formato). Alguns frameworks definem o CORS automaticamente (por exemplo, Laravel) onde outros você deve definir/habilitar manualmente.

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

solução de @jonataswalker é a melhor abordagem para lidar com POST usando Axios. Usar FormData() funcionou para mim.

então eu tenho o mesmo problema. estou usando o Vue.js para minha frente e descobri que desde que fiz a atualização para a última versão (axios e vue) não consigo enviar os dados de forma alguma. no meu último projeto eu poderia enviar dados em qualquer formato.

Nas versões mais antigas funciona bem e nas atualizadas não funciona nada.

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

meu conselho se o post não funcionar tente usar uma versão mais antiga do axios e o freamwork que você está usando.

Eu me deparei com este problema com um backend django. Felizmente eu tenho uma solução usando GET, mas axios.post definitivamente não funciona conforme documentado.

Pode ser que não seja problema de axios, mas de cors.
Se você estiver postando do servidor do nó para o backend php, seu script php precisa ter cors:

https://stackoverflow.com/a/55392661

e também não use $_POST mas $data = file_get_contents('php://input');

Isso parece estar funcionando para recuperar o valor $_POST no PHP:

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

Eu finalmente consegui isso funcionando com um backend django (com cors instalado e configurado) assim, usando uma combinação das ideias de @alvarotrigo e @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

Quando você inclui os argumentos do POST inline como os documentos sugerem, o POST fica vazio no back-end. Além disso, você não pode definir Access-Control-Allow-Origin porque isso viola cors.

Além disso, cam através deste método também
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; };

Então você ...
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 });

Depois de alguns dias e tentando todas as opções anteriores... ainda não obtive sucesso em resolver o problema.

O que temos, na verdade, é:

• O método 'post' do Axios não funciona conforme documentado;
• Executar uma simples chamada 'post' para um serviço REST ficou um inferno, usando o Axios;

Não acredito que seja sério... desculpe mas voltarei para usar outra API. Adeus Axios.

@fabriciobraga Eu estava tentando descobrir por que isso estava acontecendo no meu aplicativo também. Passei o dia inteiro vasculhando a Internet em busca da solução. No entanto, descobri que era uma questão muito simples. Meu usuário criar action ficou assim no início:

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

No parâmetro user existe um objeto contendo o email e password do novo usuário. Tentei console.log o objeto de usuário e ele relatou que as propriedades estavam indefinidas! 🤔

Então eu espalhei o objeto do usuário ao passá-lo para o método $post e agora funciona!

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

No meu caso, o objeto do usuário estava sendo enviado como objeto vazio e minha API relatou que sim. Se você está enfrentando o mesmo problema, talvez você deva tentar isso.

Um outro cenário possível é que seus dados estão sendo enviados perfeitamente, mas não no formato que sua API está esperando (por exemplo, um formato comum para scripts PHP é form-data enquanto a maioria das APIs Node.js espera JSON). Então você precisa descobrir isso; veja as discussões acima .

Tendo o mesmo problema aparentemente
axios.post("api", { API: 1, version: "0.1b"...})....
Resultados com API e versão vazias ao acessar meu servidor Java rest.
Ao enviá-lo como 3º parâmetro, ou seja,
axios.post("api", null, { params: {API: 1, version: "0.1b"...}})....
Funciona como esperado

Esta é uma das questões mais comentadas e abertas. Acredite em mim que eu li todos os comentários neste tópico. Muitos usuários ficaram confusos sobre como postar dados por axios. Alguém deu seus acertos ou conclusões e novos usuários perderam suas direções novamente.

Lembre-se de que o axios é apenas um cliente de solicitação. Se você não viu a resposta esperada, verifique se as coisas que o axios envia correspondem ao que o servidor espera. Aqui estão os meus principais passos para resolver os problemas do post ou mesmo de todos os axios. E também espero que os usuários possam abrir o problema com as seguintes perguntas respondidas. Talvez atualize o modelo de problema mais tarde.

1. De que lado você executou seus códigos? O navegador ou o lado do servidor.
2. Quais parâmetros você deseja enviar? Deve usar config.params ou config.data ?
3. Se params , como codificá-los? O padrão config.paramsSerializer é suficiente ou deve usar um personalizado?
4. Se data , você os codificou com o cabeçalho content-type correto? A maioria dos problemas de postagem falhou aqui.
   
   
   
   1. O cabeçalho application/json requer JSON.stringify e o cabeçalho application/x-www-form-urlencoded requer qs.stringify .
   
   
   2. O padrão config.transformRequest definirá application/x-www-form-urlencoded para URLSearchParams e application/json para objetos Javascript. Verifique os códigos-fonte em lib/defaults.js para obter entendimentos precisos.
   
   
5. Você conheceu outros problemas, ou seja, CORS/ATS/Promises, e sabe como resolvê-los?

Eu sei que eles parecem complexos e estou planejando escrever um tutorial explicando o mais detalhado possível. Mas não sou falante nativo e estou um pouco preocupado com o nível do meu artigo. Perdoe-me por trancá-lo e, por favor, espere que eu ou alguém da comunidade forneça um documento bem escrito. Isso é de código aberto. Precisamos da contribuição de todos.