Axios: Aplicativo tipo de conteúdo/x-www-form-urlencoded

Isso deve funcionar como você mostrou. Parece um bug. Vou dar uma olhada.

A causa são os interceptores. Não consigo enviar solicitação com esse Content-Type somente quando uso interceptores.

Aqui está o meu código:

axios.interceptors.request.use(function (config) {
        var token = LoginStore.getJwt();
        if (token) {
            config.headers["Authorization"] = "Bearer " + token;
        }

            return config;
        }, function (error) {    
            return Promise.reject(error);
        });

Dentro do interceptor, posso ver o cabeçalho 'Content-Type', mas não é enviado para o servidor.
Eu uso interceptores corretamente?

Alguma atualização sobre isso? Eu tenho o mesmo problema. Axios não envia o cabeçalho que eu configurei.

Esta parece ser a linha culpada → https://github.com/mzabriskie/axios/blob/master/lib/adapters/xhr.js#L117

Alguma idéia de por que o cabeçalho Content-Type é removido antes que a solicitação seja enviada?

Uma solução alternativa é alterar seu data para data || {} ao fazer uma solicitação de axios. Isso garantirá que os dados não sejam indefinidos.

Parece que a lógica para remover Content-Type quando requestData é undefined veio neste commit https://github.com/mzabriskie/axios/commit/9096d34186d5a5148f06c07854b21d6cc8035e96. Não há indicação de por que foi adicionado no entanto.

Eu votaria se requestData fosse undefined e o método fosse PUT , POST ou PATCH e nenhum Content-Type foi definido, então o padrão Content-Type para application/x-www-form-urlencoded . Caso contrário, apenas honre o que foi especificado.

@mzabriskie Mas no trecho de código fornecido por @alborozd , o data está definido como Querystring.stringify({...}) , então requestData não deve ser undefined , certo?

@mzabriskie acho que você está certo. Quando eu uso o violinista interceptor de solicitação mostra que os dados estão vazios. Sem interceptor, posso ver dados e cabeçalho e funciona bem.

Portanto, provavelmente o problema ocorre quando você trabalha com interceptores.

Nenhum interceptor é necessário para travar esta coisa. Eu defini os padrões de cabeçalho do tipo de conteúdo axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; e não consigo enviar nenhuma carga útil no corpo do POST.

Eu usei uma solução alternativa com URLSearchParams:

    var params = new URLSearchParams();
    params.append('email', email);
    return (dispatch) => {
        axios.post('/stack/' + uri, params)

Mas isso não é suportado pelo Safari e pelo IE.

Edit: Ok :) Próxima atualização na solução alternativa. A solução alternativa com suporte completo é enviar dados como string de consulta.
data: "flashcard=" + JSON.stringify(flashcard) + "&stackUri=" + stackUri . Dói, mas funciona 👍

Você pode usar uma biblioteca como qs em vez disso:

var qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 });

isso não é uma solução. Qual é a diferença se eu usar "Querystring" ou "qs" ? O problema é que o cabeçalho ['Content-Type'] = 'application/x-www-form-urlencoded' está vazio por causa dos interceptores.

Alguma atualização aqui? Porque eu perdi 1h hoje pesquisando por que meus POSTs não estão afetando a API (até eu lembrar sobre esse problema)... Ou não há planos para corrigir isso e é melhor ir para outro lugar?

Estou com o mesmo problema... estou aguardando solução...

Por favor, reabra @nickuraltsev , pois isso não foi corrigido pela sua solução.

+1 para emissão.

Eu uso um interceptor com biblioteca qs para resolver esse problema. Funciona bem para mim.

import qs from 'qs';

axios.interceptors.request.use((request) => {
  if (request.data && request.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
      request.data = qs.stringify(request.data);
  }
  return request;
});

+1 para emissão.

hyanmandian comentou 14 horas atrás
Eu uso um interceptor com biblioteca qs para resolver esse problema. Funciona bem para mim.

Ótimo, mas não é uma forma de resolver problema nas bibliotecas IMHO instalando outro.

Você pode simplesmente adicionar um data: {} à configuração, para que o interceptor não pule os cabeçalhos que especificamos.

Isto é o que eu fiz, e funcionou para mim:

import request from 'axios'

export const playSound = (soundFile) => (dispatch) => {
    dispatch(playSoundPending());
    return request
    .get(`/play/audio/${soundFile}`, { headers: {'Content-Type': 'audio/x-wav'}, data: {} })
    .then(response => response.data)
    });
};

Isso mudou o Content-Type de application/json para audio/x-wav para mim nos cabeçalhos de solicitação na guia de rede.

Isso já foi corrigido? Não consigo definir meu Content-Type com nenhuma das soluções postadas aqui.

Estou com o mesmo problema, alguma ajuda?

Eu resolvi o problema usando encodeURIComponent :

static getToken(nome de usuário, senha) {
return axios({
método: 'postar',
url: 'pontos finais',
dados: Username=${**encodeURIComponent**(username)}& password=${**encodeURIComponent**(password)}& Grant_type=password
})

ressalto. Definitivamente, alguém assumiria que, se definir padrões, eles seriam sempre respeitados. O Axios está definitivamente ignorando os padrões em certos contextos, causando problemas para pessoas pobres.

Aqui está uma mesclagem mais específica onde isso aconteceu: https://github.com/mzabriskie/axios/pull/195/files

+1 para este problema.
Passei mais de 3 horas tentando descobrir o que há de errado com minha configuração do Tomcat e aparentemente parece que meus cabeçalhos foram roubados no caminho para o servidor. Soluções alternativas não ajudaram. Deus salve os cabeçalhos!

@polyakoff como você resolveu isso? ou você ainda está preso. O que tenho observado é que esse problema acontece de forma intermitente

@usopan Ainda preso.

Mudei para busca isomórfica para essa solicitação específica como solução alternativa.
As coisas parecem funcionar bem na maioria dos navegadores, mas ainda não funcionam em certas versões do Safari.
Estou começando a pensar que o Safari está me ferrando.

+1 para este problema.

Encontrei a solução. A solução é detectar o navegador.
No uso do Chrome - https://github.com/ljharb/qs para analisar dados json para string e definir o cabeçalho Content-Type
No Safari, use - FormData como corpo e não defina nenhum cabeçalho Content-Type

Não consigo imaginar como um problema como esse não é corrigido há mais de meio ano.

uau boa questão! ainda esperando a atualização ☕️

é uma merda.

é foda + 1

+1

+1

+1

+1

+1

+1

+1

+1

+1

const querystring = require('querystring');

Conecte-se(){
var _este = isso;
this.$http({
URL: URL,
método: 'postar',
dados: querystring.stringify({
e-mail: e-mail,
senha: passe
}),
cabeçalhos: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(função (resposta) {
console.log(resposta);
}).catch(função (erro) {
console.log(erro);
});
}

+1

+1

+1

então, para resumir, todas as solicitações enviadas com Content-Type: application/x-www-form-urlencoded são:

• Não codificar a carga útil automaticamente
• Não definir o cabeçalho mesmo que tenha sido especificado

A solução alternativa, por enquanto, defina o data: {} para que o cabeçalho seja definido e codifique manualmente a carga de dados da solicitação

Estou compartilhando meu código:

import qs from 'qs'
...

const instance = axios.create({
  baseURL: config.api.host,
  responseType: config.api.responseType,
  timeout: config.api.timeout,
  data: {},
})

instance.interceptors.request.use((req) => {
  if (req.method === 'post') {
    req.headers['Content-Type'] = config.api.defaults.postContentType
    req.data = qs.stringify(req.data)
  }

  return req
}, (error) => Promise.reject(error))

Isso parece funcionar para mim

Ola pessoal! Eu estou querendo saber, devo fazer uma bifurcação e fornecer solução com um pequeno método nativo de análise de consulta? Será um bom 'padrão' para os criadores? @mzabriskie Você gostaria de integrar uma coisa dessas?

gaste mais de 3 horas para entrar neste problema .. @ Maxwell2022 você pode codificar com alguns dados de exemplo?

+1

1

+1

@bsjaffer Eu postei o exemplo de código, o que mais você quer?

@ Maxwell2022 estou bem com isso agora.

+1

+1

+1

+1

+1

+1

+1

++1

Apenas faça isso, espero que ajude.

let details = {
      key1: 'data1',
      key2: `data2`,
      key3: `data3`,
    };

    var formBody = [];
    for (var property in details) {
      var encodedKey = encodeURIComponent(property);
      var encodedValue = encodeURIComponent(details[property]);
      formBody.push(encodedKey + "=" + encodedValue);
    }
    formBody = formBody.join("&");

    const URL = `PUT-YOUR-API-URL-OVER-HERE`;
    return axios({
      method: 'POST',
      url: URL,
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      data: formBody,
    })
    .then(res => res.data)
    .catch(error => { throw error });

+1

Sim, você adivinhou, +1

+1

+1

+1, a solução de reznord fez a mágica (definindo dados ao lado de cabeçalhos):
const config = { headers: { 'Content-Type': 'multipart/form-data' }, data: {} };

@bruddah legal, que bom que funcionou.

_Enviado do meu OnePlus ONEPLUS A3003 usando FastHub _

+1

Usar qs funciona para mim!

No React, isso funcionou para mim:

import axios from 'axios';
import querystring from 'querystring';

const data = querystring.stringify({id:32, name:'john'});
axios.post('http://example.com/posturl', data)

A razão para isso é que o axios não está codificando automaticamente os dados de postagem antes de adicioná-los ao corpo da solicitação HTTP, portanto, eles precisam ser codificados antes de enviar a solicitação. É isso que a string de consulta faz. Leva {id:32, name:'john'} e produz algo como id=32&name=john e, em seguida, axios define isso como o corpo da solicitação de postagem.

Você pode testar isso fazendo a seguinte solicitação:

axios.post('http://example.com/posturl', 'id=32&name=john')

Isso deve ter o mesmo resultado que o código acima.

ainda não consertado mais de um ano desde que isso foi aberto ....

+1

+1

Ei pessoal! Você pode tentar isso, funciona bem para mim, mas não sei por quê.

get (url, data) {
    return axios({
      method: 'get',
      url: url,
      baseURL: 'http://xxxxx/api',
      timeout: 10000,
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
      },//this is important !
      data: data,//this is important !
      params: data//this is important !
    }).then(
      (response) => {
        console.log(response)
        return checkStatus(response)
      }
    )
  }

Tentando enviar _Content -Type:application/json-patch+json_ em uma solicitação de Patch (seguindo RFC6902 ),
o seguinte funcionou para mim (eu tenho o tipo certo nos cabeçalhos da solicitação):

axios.patch(
          url,
          data,
          { headers: { 'Content-Type': 'application/json-patch+json;charset=UTF-8' } }  
          ))

Para aqueles que têm esse problema por causa do interceptor sobrescrevendo os cabeçalhos, basta usar no seu interceptor:

config.header['yourheader'] = value;

ao invés de

config.header = {'yourheader': value}

A solução @DavidJiang7 deve funcionar

Isso funciona para mim:

static register(token, email, lang)
{
        let config = { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }; // we do it to send SIMPLE post eequest (to avoid send CORS OPTIONS request before post)
        let params = new URLSearchParams(); // and we cannot send json but params are transform to  url-style
        params.append('email', email);
        params.append('lang', lang);

        return axios.post(ENV.API_URL + '/device/' + token + '/register', params, config);
}

Imagem interessante mostrando casos CORS AQUI . A solicitação OPTIONS não será enviada quando enviarmos a solicitação SIMPLE. A solicitação simples é uma solicitação que é GET, HEAD, POST e tem o cabeçalho 'content-type ' igual a application/x-www-form-urlencoded , multipart/form-data ou text/plain e quaisquer cabeçalhos personalizados.

Apenas faça isso

const data = {name: 'my name'}
const form = 'data=' + JSON.stringify(data)
axios.post('/my_url', form)

Editado
desculpe o erro de digitação. e funciona para mim Eu tenho usado isso por meses.
Esqueci de mencionar que no servidor você tem apenas o parâmetro data

...
 $data = json_decode($_POST['data'], 1);
 echo $data['name']; // my name
...

bump para uma solução limpa, disposta a ajudar também.

@jesusantguerrero
Apenas faça isso

const data = {nome: 'meu nome'}
const form = 'data=' + JSON.stringfy(data)
axios.post('/my_url', form)

não funciona, mas é JSON.stringify ^^typo acima.

Para aqueles que usam Node.js, isso funciona. Obrigado a todos no tópico, basicamente combinei várias soluções de pessoas e fiz referência aos documentos do Node.js

Este é o mais limpo que eu poderia fazer.

import { URLSearchParams } from 'url';

async function auth() {
  try {
    const config = {
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    };
    const params = new URLSearchParams();
    params.append('grant_type', 'client_credentials');
    params.append('client_id', configuration.yelpClientId);
    params.append('client_secret', configuration.yelpClientSecret);

    const { data } = await axios.post(
      YELP_AUTH_ENDPOINT,
      params.toString(),
      config,
    );

    return data;
  } catch (error) {
    console.log(error.response.data);
    return {};
  }
}

use parâmetros em vez de dados

axios({
    method: 'post',
    url: '/my/api',
    headers: {
        'Content-type': 'application/x-www-form-urlencoded'
    },
    params: {
        'grant_type': 'code',
        'client_id': '1231453',
        'client_secret': 'THIS_IS_THE_SECRET'
    }
})
    .then((response) => {
        console.log(response);
    })
    .catch((error) => {
        console.log(error);
    }
);

@skuarch
use parâmetros em vez de dados

Se isso funcionar, é de longe a solução mais limpa.

@oshalygin define os parâmetros para a string de consulta, não envia como variáveis ​​de postagem.

Uma biblioteca ajax que não pode postar um formulário simples? Mesmo?

1

alguém sabe quem definir o tipo de conteúdo para application/json.

axios.post(`${DOMAIN}${url}`,params, {'headers': {"Content-Type": "application/json;charset=UTF-8"}})

não funciona.

@ hellomrbigshot provavelmente problema CORS (leia sobre isso, também neste tópico)

A parte problemática do código no Axios para mim (tendo problemas para obter a carga útil sem usar URLSearchParams) parece ser

        if (utils.isURLSearchParams(data)) {
          setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
          return data.toString();
        }
        if (utils.isObject(data)) {
          setContentTypeIfUnset(headers, 'application/json;charset=utf-8');
          return JSON.stringify(data);
        }
        return data;
      }

Portanto, se data for um objeto que não é um URLSearchParam (ou um dos poucos outros tipos verificados antes disso - FormData está na lista e é usado bruto), será JSON.stringified e pode fazer com que o cabeçalho seja definido como application/json.
Por outro lado, se eu passar uma string, ela será usada como está, então o comentário de 4 de julho do adeelibr é o que funciona para mim e meus dados de formulário.

Eles devem fornecer um tipo de cabeçalho padrão. Eu resolvi esse problema usando este código.
este é o meu código vue + axios no lado do cliente

Vue.prototype.$http = axios;
new Vue({
    el: '#root',
    data: {
        site_url: params.site_url,
        name: '',
        description: ''
    },
    methods:{
        onSubmit(){
            var url = this.site_url + 'project/create';
            this.$http.post( url, {
                name: this.name,
                description: this.description
            } ).then(
                response => console.log(response.data)
            );
        }
    },
    mounted(){

    }
});```
Here this.$http means axios. I using axios instead of vue resource.


My Server Side Code

if ( isset( $_POST ) ) {
$fields_to_add = array( 'nome', 'descrição');
$resposta = json_decode(file_get_contents("php://input"), true);
foreach ( $resposta como $k => $v) {
if(in_array($k, $fields_to_add) ){
$_POST[$k] = $v;
}
}
echo json_encode($_POST);
saída();
} outro{
echo json_encode( array( 'message' => 'Solicitação inválida' ) );
saída();
}
```

Coloque nomes de campo como lista de nomes de campos. Ele irá convertê-lo automaticamente em postagem
Espero que isto ajude

+1

+1

+1

OMG 😱 Eu não sabia que enviar uma solicitação POST com alguns dados de formulário application/x-www-form-urlencoded é tão complicado assim. Eu tenho que reler o README muitas vezes, e entendi errado que o campo de dados do config poderia ser usado com qs.stringify(), também params field.

No momento, parece que apenas os métodos de instância suportam o envio de dados de formulário x-www-form-urlencoded , como:

• axios#post(url[, data[, config]])
• axios#put(url[, data[, config]])
• axios#patch(url[, data[, config]])

+1

não resolvido!

Está aberto como... para sempre. A antiga lib de solicitação costumava torná-lo tão simples.

+1

+1

+1

Aqui está uma maneira fácil de fazer isso.
Primeiro de tudo, leia aqui: https://github.com/axios/axios#using -applicationx-www-form-urlencoded-format

Aqui está uma correção:

1. Vá para: https://github.com/WebReflection/url-search-params

2. Você pode instalá-lo por npm ou simplesmente baixar a biblioteca aqui: https://github.com/WebReflection/url-search-params/blob/master/build/url-search-params.js

3. Se você baixou a biblioteca, basta incluí-la em seu arquivo.

//For e.g. in your index.html, 
<script src="url-search-params.js"></script>

1. Em seguida, faça uma solicitação POST assim:

var params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params)
.then(function (response)
                {
                    console.log(response.data);
                })
                .catch(function (error)
                {
                    console.log(error);
                });

Vai funcionar como um encanto! :+1:

@aditya43 Obrigado!

Você pode realmente fazer isso também. Isso vem direto da página axios do Github. Você terá que criar o URL codificado por conta própria, mas acabei de testar e funciona.

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

Esse bug ainda existe, alguma atualização?

@ DZuz14 Eu tento e não funciona. Usando os axios globais, por instância, e nada.
Parece ser codificado.

+1

axios é uma merda, use o pedido de substituição

+1

Está funcionando!

https://www.npmjs.com/package/form-data-urlencoded

import getFormData from 'form-data-urlencoded';

let data = getFormData({"_csrf": 'wrwrwrvwg4657rhed4hehe4',
                            "Res1[Test1]": "segf96767", 
                            "Res2[Test2]": "hello"});
let options = {
     method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
    url: 'http://fhfhfhfh/455454545/fhfhfhf',
    data
};

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
axios(options).then(function (response) {
              console.log(response);
    }).catch(function (error) {
             console.log(error);
        });

Defini o charset (UTF-8) no "Content-Type" e modifiquei a solução "interceptors" acima.
Finalmente funciona.

import axios from 'axios'
import qs from 'qs'

axios.interceptors.request.use((request) => {
  if (request.data && (request.headers['Content-Type'].indexOf('application/x-www-form-urlencoded') !== -1)) {
    request.data = qs.stringify(request.data)
  }
  return request
})

axios({
  method: 'POST',
  url,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
  },
  data
}).then(() => {
// DO SOMETHING
})

Encontrei apenas casos cors, a falha de envio de cabeçalhos de solicitação de opções definir falha entre domínios, por trás da operação não será implementada.

+1

+1

+1

+1

+1

+1

+1

+1

+1

+1

Comecei com axios, como um de meus colegas me recomendou, e o primeiro esforço para mim foi obter o token de acesso de uma API em funcionamento. e eu colidi com esse bug, e depois voltei ao jQuery, (honestamente, eu aqueço muito o jQuery, mas foi forçado a fazer isso). Então, acho que não há melhor maneira de fazer as pessoas fugirem dessa biblioteca do que esse bug antigo e não resolvido.

Agradeço todo o trabalho feito nesta biblioteca, como desenvolvedor sei que criar uma biblioteca não é uma tarefa trivial, e espero um dia deixar o jQuery de lado e voltar aqui novamente.

@HakamFostok Estou usando com sucesso o github/fetch em produção para obter o token da API, você pode explorar isso como uma alternativa ao jquery.
https://github.com/github/fetch

@usopan muito obrigado, vou dar uma olhada

@Hakam Fostok
A maneira mais fácil de superar esse erro é usar o QS. Você não precisa instalar qs apenas use-o diretamente com qs.stringify

let qs = require('qs');
let result = await axios.post(url,
    qs.stringify({
        refresh_token: refresh_token,
        grant_type: 'refresh_token'
    }),
    {
        headers: {
            "Content-Type": "application/json"
        },
        auth: {
            username: 'username',
            password: 'secret'
        }
    });

Com isso você pode usar axios que é muito melhor com ES6 ;)

Mas você está completamente certo. Este Bug deveria ter sido resolvido há muito tempo. Não sei o que está demorando tanto.

@HakamFostok @Silve2611 Confirmo que a solução alternativa do qs funciona, eu a uso para obter tokens aqui: https://github.com/Halceyon/aspnet-auth/blob/master/src/AspnetAuth.js

Sim, a solução 'qs' está funcionando, MAS, o problema é que eu não uso 'qs' no projeto. obrigado pela ajuda de qualquer maneira, acabei jogando esta biblioteca e use a biblioteca ajax https://github.com/fdaciuk/ajax é muito melhor, e encorajo todos a livrarem-se desta biblioteca e migrarem para lá.

qs é baixado quase 60 milhões de vezes por mês, são 4,8Kb gzipados.
Express, body-parser, request, superagente e muitos outros dependem dele, você pode adicioná-lo sem medo ao seu projeto.

@HakamFostok Até onde eu sei, faz parte do módulo principal, então você não precisa instalá-lo manualmente se a versão do seu nó estiver atualizada.

Só não quero instalar nenhuma biblioteca, da qual não preciso, apenas para criar uma solução alternativa para um problema que deveria ser resolvido há muitos anos. Apenas para sua informação, meu projeto não é projeto React nem uso node, estou usando ASP.NET MVC com vue.js

O módulo "querystring" está embutido e, até onde eu sei, ele faz o mesmo.

@axios E esse bug que persiste?

@HakamFostok Também estou usando o vue e realmente funciona perfeitamente com axios. Considere usar qs porque o axios tem muitas vantagens se você quiser usar o async await.

O problema ainda aconteceu e eu tenho que usar manualmente qs assim

axios.post(
      "connect/token",
      qs.stringify({
        username: this.state.username,
        password: this.state.password,
        grant_type: "password",
        scope: "offline_access"
      })
    );

Isso é mesmo um bug? Estou fazendo url codificado em dois projetos diferentes com axios, e funciona muito bem. O comentário que postei aqui anteriormente é a única coisa que configurei, e funciona.

Claro que é um bug! Não funciona como descrito nos documentos. Também não faz sentido adicionar o passo adicional para algo que deve ser claramente tratado por axios. Outros métodos não precisam da etapa.

Sim, não faz sentido quando você precisa adicionar uma etapa de adição.
Se eu quiser postar

headers: {
     'Content-type': 'application/x-www-form-urlencoded'
}

tenho que escrever assim

axios.post(
      "connect/token",
      qs.stringify({
        username: this.state.username,
        password: this.state.password,
        grant_type: "password",
        scope: "offline_access"
      })
    );

Eu tive o mesmo problema com a configuração de Content-Type para application/vnd.api+json , semelhante a #340, que infelizmente foi fechada sem resolução.

Minha solução foi stringificar os dados do objeto para enviar o Content-Type , o que é um pouco hacky, já que teríamos que lidar com a maneira axios de definir application/json;charset=utf-8 ao lidar com um dados do objeto.

Espero que tenhamos mais capacidade em definir manualmente o Content-Type em vez de ter axios "adivinhar" para nós.

Ele deve "adivinhar" para nós ou lançar um erro que possamos manipular. No momento tudo parece bem, mas os parans obviamente não estão corretos. Um iniciante trabalhando com axios não poderá rastrear tal erro. Pelo menos deve ser documentado corretamente.

+1 Acabei de passar 2 horas rastreando esse problema. Teria apreciado pelo menos uma explicação/nota melhor no readme. Irá atualizar se qs resolver o problema.

UPDATE: Usando react, qs funcionou para mim. Esta foi a minha solução. Eu precisava de parâmetros de formulário e um parâmetro de consulta no meu caso.

var data = qs.stringify({
    id: 'MY_ID',
    action: 'MY_DATA'
});
var params = {
  params: {
    token: 'MY_TOKEN'
  }
};
axios.post('MY_URL', data, params)
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });

Eu precisava usar o Axios com React para realizar um processo de login e depois de horas lutando com esse problema a solução foi criar de forma independente os objetos necessários para fazer a requisição.

O erro foi: unsupported_grant_type

Este trabalho.

import axios from 'axios';
import qs from 'qs' ;

const endPoint = `${endPointApi}/ControllerX`;  

const data = qs.stringify({ 
    grant_type: 'password',            
    user: userName, 
    password: userPass
});

const headers = {
    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
};

axios.post(endPoint, data, headers)
.then(function (response) {
    debugger;
    console.log(response);
})
.catch(function (error) {
    debugger;
    console.log(error);
});

Essa outra forma não funciona.

axios.post({
    url: endPoint, 
    data: data, 
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
    }
})...

@harvic3 você pode verificar meu código de trabalho. Além disso, você não precisa de um cabeçalho específico.

https://github.com/Awesome-CMS-Core/Awesome-CMS-Core/blob/master/src/AwesomeCMSCore/AwesomeCMSCore/React/js/App/Modules/Account/LoginForm.jsx#L40 -L79

Após 2 anos e este bug ainda não foi resolvido

+1

+1

+1 ainda tem o problema

+1

+1
ping @mzabriskie @nickuraltsev

O problema no lado do nodejs é que uma das dependências, follow-redirects , está excluindo o cabeçalho do tipo de conteúdo:

https://github.com/olalonde/follow-redirects/blob/1b6340f83ad5596a0a38c16a7113692bd90301f2/index.js#L188 -L192

+1 definitivamente encontrando o mesmo problema aqui

+1

conserte isso finalmente para não usar hacks como qs (mas sim, qs funciona)

Hej

1. maio de 2018 23.31 skrev "Leonid Ershov" [email protected] :

conserte isso finalmente para não usar hacks como qs

—
Você está recebendo isso porque está inscrito neste tópico.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/axios/axios/issues/362#issuecomment-390337824 ou silenciar
o segmento
https://github.com/notifications/unsubscribe-auth/AJZ-B0lPoCseiT4WNhJFlHVUTBHbmo9Yks5tzz3FgaJpZM4JAIfw
.

Parece que este problema não será corrigido

Está começando a ficar ridículo!

Nem mesmo um "foda-se, nunca vamos consertar isso!" :/

+1

+1

Parece que algum herói, consertou e criou uma versão específica "aaxios"
Permitir configuração de tipo de conteúdo
Não testei, porém, segui em frente para buscar

+1

+1

+1

+1

👍
como @camposjorge disse, podemos ver uma correção (em breve?) graças a https://github.com/axios/axios/pull/1544

Sem reparo?

+1

Resolvi-o! não é um problema de axios, apenas sobre origem cruzada

set { headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}}
e
basta usar transformRequest das opções axios

transformRequest: [função (dados) { formato de retorno (dados) }],

função de formato usada para analisar {a:"a",b:"b"} para "a=a&b=b"

+1, e nenhuma das soluções acima funcionou

+1

Parece que muitas pessoas ainda estão esperando por uma correção para esse problema, inclusive eu - certamente depois de todo esse tempo deve haver alguma solução proposta para isso.

corrigiu esse problema com qs.stringify em reagir.

você só precisa qs.stringify os dados antes de passá-los para axios.post

o problema é que por padrão o Token CSRF é registrado como um cabeçalho comum com o Axios então
para resolver este problema

1- substitua essas linhas no bootstrap.js "

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} outro {
console.error('Token CSRF não encontrado: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
"
por esta linha"
window.axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
"
2- instale o módulo qs pelo npm clique aqui

3- defina const de qs como abaixo:
const qs = require('qs');
4- use axios por defult assim:
axios.post('seu link aqui ',qs.stringify({
'a1': 'b1',
'a2':'b2'
}))
.then(resposta => {

                     alert('ok');

                })
                .catch(error => alert(error));

Com isso, consegui enviar um formulário usando axios, independentemente do fato de que o tipo de conteúdo não pode ser alterado no axios

```
const { nome completo, email, senha, telefone } = this.state;
axios(url, {
método: "POST",
cabeçalhos: {
Aceitar: "aplicativo/json",
"Content-Type": "application/x-www-form-urlencoded"
},
dados: this.serialize({
nome: nome completo,
e-mail: e-mail,
senha: senha,
telefone: telefone
})
})
.then(resposta => {
console.log(resposta);
})
.catch(erro => {
console.log(erro.resposta);
});

serializar = obj => {
deixe str = [];
para (deixe p em obj)
if (obj.hasOwnProperty(p)) {
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
}
return str.join("&");
};

Ressalto. Ridiculamente, depois de anos, esse bug irritante ainda não foi corrigido.

Ressalto. Mesmo problema aqui, correção necessária af.

@mzabriskie

Isso não deveria ser fechado como fixo?
Testei com os cabeçalhos apropriados e eles estão sendo definidos corretamente na solicitação.
Cabeçalhos a pedido
Configurando cabeçalhos aqui

biblioteca form-urlencoded me ajuda a corrigir isso (para temporário).

return preset.post("/app/BookingProc.do",formurlencoded(dat),{
        headers:{
            Cookie:session
        }
    }).then(response=>{
        return response
    })

@mzabriskie

Isso não deveria ser fechado como fixo?
Testei com os cabeçalhos apropriados e eles estão sendo definidos corretamente na solicitação.
Cabeçalhos a pedido
Configurando cabeçalhos aqui

não, isso não pode ser fechado!!!
Todo mundo está correndo para o problema e não onde encontrar a solução. Deve funcionar sem definir cabeçalhos ou um cabeçalho padrão deve ser definido.
Caso contrário, um erro deve ser lançado mostrando onde está o problema.
Além disso, a documentação deve ser atualizada.

Ainda está quebrado!

Ressalto. Este bug ainda está em seu lugar e é ótimo!

ressalto

Esse bug ainda vive!

Também estou passando por esse bug aqui.

ainda nojento aqui

const axios = require('axios');
const qs = require('querystring');

axios.post(`${this.api}siteverify`, qs.stringify({
  secret: this.secret,
  response: recaptchaToken,
  remoteip: userIP,
}), {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
});

Isso funciona para mim. Eu tirei do aplicativo que estou desenvolvendo atualmente, esta parte é para verificar o recaptcha do google.

Ainda com o mesmo problema...

A configuração como padrão não está funcionando:
axios.defaults.headers.common['Accept'] = 'application/json'; // working axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8'; // NOT working

E também a configuração na solicitação não está funcionando:
axios.get(url, { headers: { 'Content-Type': 'application/json;charset=UTF-8' } })

@aaroninn isso não parece ser o mesmo problema, abra um novo problema se você acha que seu problema está relacionado a axios (que parece estar mais relacionado a um uso básico de vuex para eu, mas não posso ter certeza)

este tópico já está cheio de +1 , não há necessidade de reunir outros problemas aqui

https://github.com/axios/axios/issues/362#issuecomment -229817415

@mzabriskie parece que você é o autor do commit que introduziu este problema, você não pode fazer nada sobre isso (se você nem entende por que você fez isso em primeiro lugar, você pode/deve revertê-lo, certo?)

desde já, obrigado

É 2018! Qual resposta, acima, não devo rebaixar?

Diga-me novamente por que todos nós amamos Axios?

Este problema precisa de uma correção? Ou é voluntário, estou perguntando, está aberto há 2 anos, mas ninguém consertou. É voluntário e não precisa ser corrigido?

@jeremycare Acabei de criar um PR para esse problema... Acho que é um "bug" muito chato e deve ser corrigido. Especialmente é muito fácil corrigir isso e se livrar desse problema.

Pessoal, acho que entendi porque esse ticket ainda está aberto.
As pessoas que dizem que funciona para eles agora usam o módulo "qs", aqueles que dizem que não funciona usam o módulo "querystring".
Eu vejo pessoas também tendo problemas com cabeçalhos, este ticket demora tanto para ler tudo e pode ser que eu não entenda tudo sobre o problema neste ticket, mas se alguém não puder fazer solicitações com dados de formulário funcionem, verifique isso antes de tentar outras coisas:

Descrito tudo aqui: https://github.com/axios/axios/issues/1894

É decepcionante ver uma troca de fetch nativo em navegadores funcionar instantaneamente com a configuração de Content-Type quando o Axios falha em configurá-la. A interoperabilidade entre plataformas foi seu maior ponto de venda para mim.

Eu posso ver no método transformRequest que o cabeçalho está definido, mas nunca chega à solicitação real. Não consigo usar o módulo qs pois estou simplesmente enviando um corpo de texto.

Para reformular o que estou experimentando: não consigo definir um cabeçalho Content-Type no navegador usando axios, pois ele é substituído. Estou enviando uma carga útil de string (sem formdata), então os módulos qs / querystring não são relevantes para o meu caso.

O que podemos fazer para corrigir isso?

EDIT: Por enquanto, vou usar apenas fetch quando estiver no navegador, mas isso meio que nega todo o ponto de usar axios para mim.

EDIT2: Eu construí minha própria biblioteca - capuz - para lidar com minhas solicitações em vários ambientes (direcionando Node/Browser/React-Native). Não é de forma alguma um substituto para o axios e sua riqueza de recursos, mas suporta todos os fundamentos.

Obteve o mesmo problema. E se eu definir a chave para qualquer outra coisa, funciona, exceto "Content-Type"! Por favor ajude!

Na verdade, tive que criar outro aplicativo híbrido confuso usando fetch em navegadores e axios no nó e no react-native. Parece engraçado que seja assim e não o contrário. Realmente espero ver isso resolvido em breve para que eu possa remover meu remendo de macaco.

Eu acho que é importante perceber que isso definitivamente não é apenas um problema com querystring .. Meu conteúdo de corpo é apenas texto bruto sem parâmetros, mas não posso enviá-lo usando axios com um Content-Type .

Eu tentei usar o post, funciona bem, o padrão do post é json

Estou enfrentando esse bug agora... então não há solução para isso depois de anos? Uau...

Criei um PR que resolveria o problema há mais de dois meses... Não entendo por que ele não foi mesclado?!

Criei um PR que resolveria o problema há mais de dois meses... Não entendo por que ele não foi mesclado?!

Tenha em mente que ninguém pressionou nada desde setembro do ano passado, talvez eles estejam procurando por mantenedores?. Além disso, acho que você perdeu um teste quando comparo seu PR com: https://github.com/axios/axios/pull/1544/files

@mzabriskie você poderia assumir a responsabilidade de mesclar um desses PR's? Como atualmente, alguns softwares exigem que as solicitações get tenham um tipo de conteúdo definido (parâmetros RoR, por exemplo: https://guides.rubyonrails.org/api_app.html#using-actiondispatch-request). A solução especificada em https://github.com/axios/axios/issues/362#issuecomment -229817415 parece ser o caminho certo a seguir e, acima de tudo, resolveria todos os hacks desesperados, como usar fetch para este caso de uso específico.

Mudei para a página got , pois axios parece abandonado.

Portanto, o Axios é oficialmente incapaz de enviar solicitações com 'Content-Type': 'application/x-www-form-urlencoded' ou a solução @ChBernat realmente funciona?

Existe alguma solução alternativa para este problema atm?

Existe alguma solução alternativa para este problema atm?

Pesquise um ano aqui e você verá muitas soluções alternativas... Embora eu recomende, como outros e eu inclusive, passar dos axios. Está abandonado...

Uau... eles deveriam simplesmente abandonar o projeto neste momento, eu sei que estou. Quase 3 anos desde o problema relatado originalmente e agora ainda estamos tentando resolver isso? Inacreditável. Eu amo código aberto, então não estou guardando nenhum ressentimento por este projeto não ter mantenedores, mas ... é usado por TONELADAS de pessoas, então o mínimo que você pode fazer é abandoná-lo, então todos sabemos que este projeto está morto / morrendo. Obrigado.

@justintime4tea Você tem uma nova recomendação?

got

@kslr obteve ou solicitação parece que todo mundo começou a migrar também. Estou tentando ficar com o Axios, mas acho que vai acabar sendo só escrever alguma camada de abstração sobre ele para que eu possa trocar a biblioteca de solicitação HTTP subjacente e, se eu usar uma biblioteca diferente que tenha um "construído -in" cliente HTTP que ele usa, apenas deixe-o fazer o seu trabalho.

Eu tentei algo assim e funcionou para mim.
Talvez não seja a melhor solução, mas pode realmente ajudar (eu acho), qualquer sugestão, se esta solução for horrível, é bem-vinda.

const foo= yield qs.stringify({ 'grant_type' : 'yourGrantType', 'param' : param, 'param' : param }) const bar= yield axios.post('/baz', foo)

Eu removi o cabeçalho, e parece que ele recebeu bem.

axios({
  url,
  method: 'POST',
  headers:{
    'Content-Type': 'application/json'
  },
  data: null, // important
})

Eu tive dois problemas usando RoR como back-end.

Meu contexto:

Eu tinha um projeto usando vue-resource obsoleto e tudo funciona bem sem configuração adicional. E agora, estou organizando as dependências do projeto e substituindo as dependências obsoletas, então substituí vue-resource por axios ;)...

Mas, tivemos alguns problemas e abaixo vou compartilhar o que faço para resolver esses problemas. Talvez ajude alguém! Desculpe se não te ajudei como você esperava

Primeiro problema , o problema é o mesmo que esse problema, resolvi usando:

axios.interceptors.request.use(config => {
  config.paramsSerializer = params => qs.stringify(params);
  return config;
});

Agora, parametros como:

q: {
  search: "Something",
  sort: "asc",
}

será transformado em:
http://xxxx/?q%5Bsearch%5D=something&q%5Bsort%5D=asc

este analisado será:

q[search]: something
q[sort]: asc

Segundo problema , o RoR está retornando a resposta HTML em vez da resposta JSON:

Esse problema ocorre porque nosso backend deve distinguir solicitações AJAX de outros tipos de solicitações.

Por padrão, vue-resource já definiu o cabeçalho X-Requested-With como esperado. Mas, axios não. Então, eu tive que definir essa chave no cabeçalho da solicitação. Minha configuração global do Axios foi a seguinte no final:

axios.interceptors.request.use(config => {
  config.paramsSerializer = params => qs.stringify(params);
  return config;
});
axios.defaults.headers.common['Accept'] = 'application/json';
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

===

Se você usa Rails como backend e nenhuma das soluções funcionou para você, me avise, talvez eu te ajude =).

use isso .. https://gist.github.com/akexorcist/ea93ee47d39cf94e77802bc39c46589b#gistcomment -2878451

Estou trabalhando em react-native e recebendo erro de solicitação 400 inválida ao usar isto:
import * como qs de 'querystring';
axios.post(url,qs.stringify({
'first_name': 'profundo',
'last_name': 'palotra',
}),{
cabeçalhos: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
}).then((resposta)=>{
console.log('funcionou')
}).catch((erro)=>{
console.log('erro')
console.log(erro)
})

então, como resolver este problema?

qualquer solução :(

Resolvido por qs

{ data: qs.stringify(bodyObject) }

É triste ver que tantas pessoas estão confusas nesta questão. Eu tentei o meu melhor para ler esses comentários. Mas parece ter envolvido muitos outros problemas.

Todos, perdoem-me por fechá-la. Se alguém puder abrir uma nova questão para descrever o problema claramente, isso será muito importante para você.

Oi a todos,

Eu pensei em entrar na conversa, pois perdi quase um dia inteiro de trabalho da minha vida tentando resolver isso. Isso pode ajudar alguns parcialmente ou completamente, então esperamos que isso seja útil.

Minha resposta decorre de ver várias razões pelas quais um POST estava falhando com o Axios, variando de:

1. 400 Solicitação Inválida
2. Não é possível postar com cabeçalhos personalizados (como este tópico)
3. Precisa serializar/stringir os dados/carga útil

Eu estava enfrentando o mesmo problema que todos neste tópico com o Bad Request 400 ao passar cabeçalhos personalizados para o Axios na configuração assim, e tentei muitas das respostas aqui, como usar qs.stringify(), definindo dados na configuração para null ou {} sem sucesso.

1) Nota - Adicionar o bloco .catch() e registrar o erro assim realmente me ajudou porque eu consegui trazer à tona um erro que não era tão enigmático. Consegui usar a mensagem para depurar e, finalmente, descobrir o problema que estava tendo.

2) É importante no bloco .then() retornar response.data , caso contrário você encontrará este erro:

Converting circular structure to JSON

Agora, meu problema era que o corpo do POST da API não era o que o endpoint queria, mas não consegui vê-lo até conseguir registrar o erro.

Além disso, também estou usando o NestJS e o HttpService, que é um wrapper em torno do Axios, e isso complicou ainda mais o problema porque o erro real não estava borbulhando no retorno de chamada catchError no meu pipe.

Então aqui está a solução para Axios puro e NestJS.

Axios:

const headers = { 'Content-Type': 'application/x-www-form-urlencoded' };
return axios.post('https://some-made-up-endpoint, dataString, { headers })
.then(resp => resp.data)
.catch(error => {
this.logger.log('ERROR: ${JSON.stringify(error.response.data)}');
});

NestJS:

const headers = { 'Content-Type': 'application/x-www-form-urlencoded' };
return this.http.post('https://some-made-up-endpoint, dataString, { headers }).pipe(
map(response => response.data), // This is important otherwise - circular JSON error
catchError((error: any) => {
this.logger.error('[[[[ ERROR TRYING TO FETCH TOKEN: ${error.message} ]]]]');
return of()
})
).toPromise();

TLDR;

1) Adicione o bloco .catch() para registrar corretamente o erro real, caso contrário, é 400 Bad Request
2) Certifique-se de que sua assinatura de dados corresponda ao que a API está esperando. Isso é parte do motivo pelo qual existe um erro, pois um código 400 é um 'Bad Request'
3) Retorne o response.data no bloco .then() se estiver usando Axios, ou em um operador de mapa se estiver usando NestJS ou receberá o erro Converting circular JSON

Desculpem o post longo e boa sorte a todos!

Saúde

Estou trabalhando em react-native e recebendo erro de solicitação 400 inválida ao usar isto:
import * como qs de 'querystring';
axios.post(url,qs.stringify({
'first_name': 'profundo',
'last_name': 'palotra',
}),{
cabeçalhos: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
}).then((resposta)=>{
console.log('funcionou')
}).catch((erro)=>{
console.log('erro')
console.log(erro)
})

este trabalho para mim. com query stringfy muito obrigado.
você salva minha vida

Você pode usar uma biblioteca como qs em vez disso:

var qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 });

Sua solução está funcionando. Muito obrigado!