Axios: Aplicación de tipo de contenido/x-www-form-urlencoded

Eso debería funcionar como lo has mostrado. Suena como un error. Lo investigaré.

La causa son los interceptores. No puedo enviar una solicitud con ese tipo de contenido solo cuando uso interceptores.

Aquí está mi 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 del interceptor puedo ver el encabezado 'Tipo de contenido', pero no se envía al servidor.
¿Utilizo correctamente los interceptores?

¿Alguna actualización sobre esto? Tengo el mismo problema. Axios no envía el encabezado que configuré.

Esta parece ser la línea culpable → https://github.com/mzabriskie/axios/blob/master/lib/adapters/xhr.js#L117

¿Alguna idea de por qué se elimina el encabezado Content-Type antes de enviar la solicitud?

Una opción alternativa es cambiar su data a data || {} cuando realiza una solicitud axios. Esto asegurará que los datos no estén indefinidos.

Parece que la lógica para eliminar Content-Type cuando requestData es undefined vino en este compromiso https://github.com/mzabriskie/axios/commit/9096d34186d5a5148f06c07854b21d6cc8035e96. Sin embargo, no hay indicación de por qué se agregó.

Votaría si requestData es undefined y el método es PUT , POST o PATCH y no tiene Content-Type se ha establecido, luego por defecto Content-Type a application/x-www-form-urlencoded . De lo contrario, simplemente respete lo que se haya especificado.

@mzabriskie Pero en el fragmento de código proporcionado por @alborozd , el data está establecido en Querystring.stringify({...}) , por lo que requestData no debería ser undefined , ¿verdad?

@mzabriskie Creo que tienes razón. Cuando uso el interceptor de solicitudes, el violinista muestra que los datos están vacíos. Sin interceptor puedo ver datos y encabezado y funciona bien.

Entonces, probablemente el problema ocurra cuando trabajas con interceptores.

No se necesita un interceptor para estrellar esta cosa. Establecí los valores predeterminados del encabezado del tipo de contenido axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; , y no puedo enviar ninguna carga útil en el cuerpo POST.

He usado una solución alternativa con URLSearchParams:

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

Pero esto no es compatible con Safari e IE.

Editar: Bien :) Próxima actualización sobre la solución. La solución totalmente admitida es enviar datos como cadena de consulta.
data: "flashcard=" + JSON.stringify(flashcard) + "&stackUri=" + stackUri . Duele, pero funciona 👍

Puede usar una biblioteca como qs en su lugar:

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

Esta no es una solución. ¿Cuál es la diferencia si uso "Querystring" o "qs" ? El problema es que el encabezado ['Content-Type'] = 'application/x-www-form-urlencoded' está vacío debido a los interceptores.

¿Alguna actualización aquí? Porque perdí 1 hora hoy investigando por qué mis POST no afectan a la API (hasta que recordé ese problema)... ¿O no hay planes para solucionarlo y es mejor ir a otro lugar?

tengo el mismo problema... todavia esperando solucion...

Vuelva a abrir @nickuraltsev ya que su solución no soluciona esto.

+1 por problema.

Uso un interceptor con la biblioteca qs para resolver este problema. Funciona bien para mí.

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 por problema.

hyanmandian comentó hace 14 horas
Uso un interceptor con la biblioteca qs para resolver este problema. Funciona bien para mí.

Genial, pero en mi humilde opinión no es una forma de resolver el problema en las bibliotecas instalando otra.

Simplemente puede agregar un data: {} a la configuración, para que el interceptor no omita los encabezados que especificamos.

Esto es lo que hice, y funcionó para mí:

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

Esto cambió el Content-Type de application/json a audio/x-wav para mí en los encabezados de solicitud en la pestaña de red.

¿Ya se ha arreglado esto? Parece que no puedo configurar mi tipo de contenido con ninguna de las soluciones publicadas aquí.

Tengo el mismo problema, alguna ayuda?

Resolví el problema usando encodeURIComponent :

getToken estático (nombre de usuario, contraseña) {
devuelve axios({
método: 'publicar',
url: 'puntos finales',
datos: Username=${**encodeURIComponent**(username)}& password=${**encodeURIComponent**(password)}& Grant_type=password
})

protuberancia. Definitivamente, uno asumiría que si uno establece valores predeterminados, siempre se respetarán. Axios definitivamente está ignorando los valores predeterminados en ciertos contextos, causando problemas a las personas pobres.

Aquí hay una combinación más específica donde sucedió esto: https://github.com/mzabriskie/axios/pull/195/files

+1 para este problema.
Pasé más de 3 horas tratando de averiguar qué estaba mal con mi configuración de Tomcat y aparentemente me robaron los encabezados de camino al servidor. Las soluciones alternativas no ayudaron. ¡Dios guarde los encabezados!

@polyakoff , ¿cómo resolviste esto? o todavía estás atascado. Lo que he observado es que este problema ocurre de forma intermitente.

@usopan Todavía atascado.

Me moví a isomorphic-fetch para esta solicitud en particular como solución alternativa.
Las cosas parecen funcionar bien en la mayoría de los navegadores, pero aún no funcionan en ciertas versiones de Safari.
Estoy empezando a pensar que Safari me está jodiendo.

+1 para este problema.

Encontré la solución. La solución es detectar el navegador.
En el uso de Chrome: https://github.com/ljharb/qs para analizar datos json en cadenas y establecer el encabezado de tipo de contenido
En el uso de Safari: FormData como cuerpo y no establezca ningún encabezado de tipo de contenido

No puedo imaginar cómo un problema como este no se soluciona durante más de medio año.

guau buen tema! sigo esperando la actualización ☕️

apesta

apesta + 1

+1

+1

+1

+1

+1

+1

+1

+1

+1

const cadena de consulta = require('cadena de consulta');

acceso(){
var _esto = esto;
esto.$http({
URL: URL,
método: 'publicar',
datos: cadena de consulta.stringify({
correo electrónico: correo electrónico,
contraseña: pase
}),
encabezados: {
'Tipo de contenido': 'aplicación/x-www-form-urlencoded'
}
}).then(función (respuesta) {
consola.log(respuesta);
}).catch(función (error) {
consola.log(error);
});
}

+1

+1

+1

para resumir esto, cualquier solicitud enviada con Content-Type: application/x-www-form-urlencoded es:

• No codificar la carga útil automáticamente
• No configurar el encabezado aunque se haya especificado

La solución alternativa, por ahora, es configurar data: {} para que se configure el encabezado y codificar manualmente la carga de datos de la solicitud.

Estoy compartiendo mi 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))

Esto parece funcionar para mí

¡Hola chicos! Me pregunto, ¿debería hacer una bifurcación y proporcionar una solución con un pequeño método nativo de análisis de consultas? ¿Será un buen 'patrón' para los creadores? @mzabriskie ¿Te gustaría integrar tal cosa?

Dedique más de 3 horas a abordar este problema. @ Maxwell2022 ¿puede codificar con algunos datos de muestra?

+1

1

+1

@bsjaffer He publicado el código de muestra, ¿qué más quieres?

@ Maxwell2022 estoy bien ahora.

+1

+1

+1

+1

+1

+1

+1

++1

Solo haz esto, espero que te ayude.

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

Sí, lo has adivinado, +1

+1

+1

+1, la solución de reznord hizo la magia (estableciendo datos junto con los encabezados):
const config = { headers: { 'Content-Type': 'multipart/form-data' }, data: {} };

@bruddah genial, me alegro de que haya funcionado.

_Enviado desde mi OnePlus ONEPLUS A3003 mediante FastHub _

+1

¡Usar qs funciona para mí!

En React, esto funcionó para mí:

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

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

La razón de esto es que axios no codifica automáticamente los datos de la publicación antes de agregarlos al cuerpo de la solicitud HTTP, por lo que debe codificarse antes de enviar la solicitud. Eso es lo que hace la cadena de consulta. Toma {id:32, name:'john'} y produce algo como id=32&name=john y luego axios establece eso como el cuerpo de la solicitud de publicación.

Puede probar esto haciendo la siguiente solicitud:

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

Eso debería tener el mismo resultado que el código anterior.

aun no arreglado hace mas de un año que esto abrio....

+1

+1

¡Hola chicos! Puedes probar esto, funciona bien para mí, pero no sé 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)
      }
    )
  }

Intentando enviar _Content- Type:application/json-patch+json_ en una solicitud de parche (siguiendo RFC6902 ),
lo siguiente funcionó para mí (tengo el tipo correcto en los encabezados de solicitud):

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

Para aquellos que tienen este problema debido a que el interceptor sobrescribe los encabezados, simplemente use en su interceptor:

config.header['yourheader'] = value;

en lugar de

config.header = {'yourheader': value}

La solución de @DavidJiang7 debería funcionar

Esto funciona para mí:

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

Interesante imagen que muestra los casos de CORS AQUÍ . La solicitud de OPCIONES no se enviará cuando enviemos una solicitud SIMPLE. La solicitud simple es una solicitud que es GET, HEAD, POST y tiene un encabezado 'content-type ' igual a application/x-www-form-urlencoded , multipart/form-data o text/plain y cualquier encabezado personalizado.

solo haz esto

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

editado
perdón por el error tipográfico. y funciona para mí. He estado usando esto durante meses.
Olvidé mencionar que en el servidor solo tienes el data

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

busca una solución limpia, dispuesto a ayudar también.

@jesusantguerrero
solo haz esto

datos const = {nombre: 'mi nombre'}
forma const = 'datos =' + JSON.stringfy (datos)
axios.post('/mi_url', formulario)

no funciona, pero es JSON.stringify ^^error tipográfico arriba.

Para aquellos de ustedes que usan Node.js, esto funciona. Gracias a todos en el hilo, básicamente combiné un montón de soluciones de personas y referencias a los documentos de Node.js.

Esto es lo más limpio que se me ocurrió.

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

usar parámetros en lugar de datos

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
usar parámetros en lugar de datos

Si eso funciona, es la solución más limpia con diferencia.

@oshalygin establece los parámetros en la cadena de consulta, no los envía como variables de publicación.

¿Una biblioteca ajax que no puede publicar un formulario simple? ¿En serio?

1

alguien sabe a quién configurar el tipo de contenido en application/json.

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

no funciona

@hellomrbigshot probablemente problema CORS (lea sobre esto, también en este hilo)

El fragmento de código problemático en Axios para mí (tener problemas para obtener la carga útil correcta sin 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;
      }

Entonces, si data es un objeto que no es un URLSearchParam (o uno de algunos otros tipos que se verifican antes de esto: FormData está en la lista y se usa sin formato), entonces será JSON.stringified y podría hacer que el encabezado se establezca en application/json.
Por otro lado, si paso una cadena, se usa tal cual, por lo que el comentario del 4 de julio de adeelibr es el que funciona para mí y para los datos de mi formulario.

Deben proporcionar un tipo de encabezado predeterminado. Resolví este problema usando este código.
este es mi código vue + axios en el lado del 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

si ( isset ($ _POST ) ) {
$fields_to_add = array( 'nombre', 'descripción' );
$respuesta = json_decode(file_get_contents("php://input"), true);
foreach ( $respuesta como $k => $v ) {
if( in_array($k, $fields_to_add) ){
$_POST[$k] = $v;
}
}
echo json_encode ($_POST);
Salida();
} demás{
echo json_encode( array( 'mensaje' => 'Solicitud inválida' ) );
Salida();
}
```

Poner nombres de campo como lista de nombres de campos. Lo convertirá automáticamente en publicación.
Espero que esto ayude

+1

+1

+1

OMG 😱 No sabía que enviar una solicitud POST con algunos datos de formulario application/x-www-form-urlencoded fuera tan complicado como este. Tengo que volver a leer el LÉAME muchas veces, y entiendo mal que el campo de datos de la configuración podría usarse con qs.stringify(), también el campo de parámetros.

Por el momento, parece que solo los métodos de instancia admiten el envío de datos de formulario x-www-form-urlencoded como:

• axios#post(url[, datos[, configuración]])
• axios#put(url[, datos[, configuración]])
• axios#parche(url[, datos[, configuración]])

+1

¡no resuelto!

Está abierto como... para siempre. La antigua biblioteca de solicitudes solía hacerlo tan simple.

+1

+1

+1

Aquí hay una manera fácil de hacer esto.
En primer lugar, lea aquí: https://github.com/axios/axios#using -applicationx-www-form-urlencoded-format

Aquí hay una solución:

1. Vaya a: https://github.com/WebReflection/url-search-params

2. Puede instalarlo npm o simplemente descargar la biblioteca desde aquí: https://github.com/WebReflection/url-search-params/blob/master/build/url-search-params.js

3. Si ha descargado la biblioteca, simplemente inclúyala en su archivo.

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

1. Luego haga una solicitud POST como esta:

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

¡Funcionará a las mil maravillas! :+1:

@aditya43 ¡Gracias!

De hecho, también puedes hacer esto. Esto viene directamente de la página de axios Github. Tendrá que crear la URL codificada usted mismo, pero acabo de probarla y funciona.

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

Este error aún existe, ¿alguna actualización?

@ DZuz14 Lo intento y no funciona. Usando los axios globales, por instancia, y nada.
Parece estar codificado.

+1

axios apesta, use la solicitud de reemplazo

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

Definí el conjunto de caracteres (UTF-8) en el "Tipo de contenido" y modifiqué la solución de "interceptores" anterior.
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
})

Encontré solo cors casos, la falla en el envío de encabezados de solicitud de opciones establece una falla entre dominios, detrás de la operación no se implementará.

+1

+1

+1

+1

+1

+1

+1

+1

+1

+1

Comencé con axios, ya que uno de mis colegas me lo recomendó, y el primer esfuerzo para mí fue obtener el token de acceso de una API en funcionamiento. y choqué con este error, y luego regresé a jQuery (honestamente, caliento mucho a jQuery, pero se vio obligado a hacer eso). Así que creo que no hay mejor manera de hacer que la gente huya de esta biblioteca que este viejo error sin resolver.

Agradezco todo el trabajo realizado en esta biblioteca, como desarrollador, sé que crear una biblioteca no es una tarea trivial, y espero defraudar a jQuery algún día y volver aquí nuevamente.

@HakamFostok Estoy usando con éxito github/fetch en producción para obtener un token de API, podría explorarlo como una alternativa a jquery.
https://github.com/github/fetch

@usopan muchas gracias, le echaré un vistazo

@HakamFostok
La forma más fácil de superar este error es usar QS. No tienes que instalar qs solo úsalo directamente con 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'
        }
    });

Con eso puedes usar axios que es mucho mejor con ES6;)

Pero tienes toda la razón. Este error debería haber sido resuelto hace mucho tiempo. No sé qué les está tomando tanto tiempo.

@HakamFostok @Silve2611 Confirmo que la solución qs funciona, la uso para obtener tokens aquí: https://github.com/Halceyon/aspnet-auth/blob/master/src/AspnetAuth.js

Sí, el trabajo de 'qs' está funcionando, PERO, el problema es que no uso 'qs' en el proyecto. gracias por la ayuda de todos modos, terminé tirando esta biblioteca y usando la biblioteca ajax https://github.com/fdaciuk/ajax es mucho mejor, y animo a todos a deshacerse de esta biblioteca y migrar allí.

qs se descarga casi 60 millones de veces al mes, tiene un tamaño de 4.8Kb comprimido en gzip.
Express, body-parser, request, superagent y muchos otros dependen de él, puedes agregarlo sin miedo a tu proyecto.

@HakamFostok Por lo que sé, es parte del módulo principal, por lo que no tiene que instalarlo manualmente si la versión de su nodo está actualizada.

Simplemente no quiero instalar ninguna biblioteca, que no necesito, solo para crear una solución para un problema que debería resolverse hace muchos años. Solo para su información, mi proyecto no es un proyecto React ni uso un nodo, estoy usando ASP.NET MVC con vue.js

El módulo "cadena de consulta" está integrado y, hasta donde yo sé, hace lo mismo.

@axios ¿Qué pasa con este error que persiste?

@HakamFostok También estoy usando vue y realmente funciona perfectamente con axios. Considere usar qs porque axios tiene muchas ventajas si desea usar async await.

El problema sigue ocurriendo y tengo que usar qs manualmente como este

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

¿Es esto realmente un error? Estoy codificando URL en dos proyectos diferentes con axios, y funciona bien. El comentario que publiqué aquí anteriormente es lo único que configuré y funciona.

¡Por supuesto que es un error! No funciona como se describe en los documentos. Además, no tiene sentido agregar el paso adicional para algo que claramente debe ser manejado por axios. Otros métodos no necesitan el paso.

Sí, no tiene sentido cuando tienes que agregar un paso adicional.
si quiero publicar

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

tengo que escribir asi

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

Tuve el mismo problema al establecer Content-Type en application/vnd.api+json , similar a #340, que lamentablemente se cerró sin resolución.

Mi solución fue encadenar los datos del objeto para enviar el Content-Type , lo cual es un poco complicado, ya que tendríamos que lidiar con la forma axios de configurar application/json;charset=utf-8 cuando se trata de un datos de objetos

Espero que tengamos más capacidad para configurar manualmente los Content-Type en lugar de que Axios lo "adivine".

Debería "adivinarlo" por nosotros o lanzar un error que podamos manejar. Por el momento todo se ve bien, pero los parámetros obviamente no son correctos. Un principiante que trabaje con axios no podrá rastrear dicho error. Al menos debería documentarse correctamente.

+1 Acabo de pasar 2 horas rastreando este problema. Habría apreciado una mejor explicación/nota en el archivo Léame como mínimo. Se actualizará si qs resuelve el problema.

ACTUALIZACIÓN: Usando reaccionar, qs funcionó para mí. Esta fue mi solución. Necesitaba tanto parámetros de formulario como un parámetro de consulta en mi 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);
    });

Necesitaba usar Axios con React para realizar un proceso de inicio de sesión y después de luchar durante horas con este problema, la solución fue crear de forma independiente los objetos necesarios para realizar la solicitud.

El error fue: unsupported_grant_type

Este trabajo.

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

Esta otra forma no funciona.

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

@ harvic3 puede verificar mi código de trabajo. Además, no necesita un encabezado 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

Después de 2 años y este error aún no se resuelve

+1

+1

+1 sigue teniendo el problema

+1

+1
ping @mzabriskie @nickuraltsev

El problema en el lado de nodejs es que una de las dependencias, follow-redirects , está eliminando el encabezado de tipo de contenido:

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

+1 definitivamente se encuentra con el mismo problema aquí

+1

solucione esto finalmente para no usar hacks como qs (pero si, qs funciona)

hej

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

arregla esto por fin para no usar hacks como qs

—
Estás recibiendo esto porque estás suscrito a este hilo.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/axios/axios/issues/362#issuecomment-390337824 , o silenciar
la amenaza
https://github.com/notifications/unsubscribe-auth/AJZ-B0lPoCseiT4WNhJFlHVUTBHbmo9Yks5tzz3FgaJpZM4JAIfw
.

Parece que este problema no se solucionará

¡Está empezando a ponerse ridículo!

Ni siquiera un "¡Vete a la mierda, nunca arreglaremos esto!" :/

+1

+1

Parece que algún héroe lo arregló y creó una versión específica "aaxios"
Permitir la configuración del tipo de contenido
Sin embargo, no lo probé, pasó a buscar

+1

+1

+1

+1

👍
como dijo @camposjorge , podemos ver una solución (¿pronto?) gracias a https://github.com/axios/axios/pull/1544

¿sin arreglo?

+1

¡resuelto! no es un problema de axios, solo de origen cruzado

set { headers: {'Content-Type': 'application/x-www-form-urlencoded; juego de caracteres=UTF-8'}}
y
solo use transformRequest de las opciones de axios

transformRequest: [función (datos) { formato de retorno (datos) }],

función de formato utilizada para analizar {a:"a",b:"b"} a "a=a&b=b"

+1, y ninguna de las soluciones anteriores funcionó

+1

Parece que mucha gente todavía está esperando una solución para este problema, incluido yo mismo; seguramente después de todo este tiempo debe haber alguna solución propuesta para esto.

solucionó este problema con qs.stringify en reaccionar.

solo tiene que qs.stringificar los datos antes de pasarlos a axios.post

el problema es que, de forma predeterminada, el token CSRF se registra como un encabezado común con Axios, por lo que
para resolver este problema

1- reemplaza estas líneas en bootstrap.js "

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

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

si (ficha) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} demás {
console.error('Token CSRF no encontrado: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
"
por esta linea"
window.axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
"
2- instale el módulo qs por npm haga clic aquí

3- define const de qs como a continuación:
const qs = require('qs');
4- use axios por defecto así:
axios.post('tu enlace aquí',qs.stringify({
'a1': 'b1',
'a2':'b2'
}))
.entonces(respuesta => {

                     alert('ok');

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

Con esto pude enviar un formulario usando axios independientemente del hecho de que el tipo de contenido no se puede cambiar en axios

```
const {nombre completo, correo electrónico, contraseña, teléfono} = este.estado;
axios(url, {
método: "POST",
encabezados: {
Aceptar: "aplicación/json",
"Tipo de contenido": "aplicación/x-www-form-urlencoded"
},
datos: this.serialize({
nombre: nombre completo,
correo electrónico: correo electrónico,
contraseña: contraseña,
telefono: telefono
})
})
.entonces(respuesta => {
consola.log(respuesta);
})
.catch(error => {
consola.log(error.respuesta);
});

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

Protuberancia. Ridículamente, después de años, este molesto error aún no se ha solucionado.

Protuberancia. Mismo problema aquí, corrija requerido af.

@mzabriskie

¿No debería estar esto cerrado como arreglado?
Lo probé con los encabezados apropiados y se están configurando correctamente en la solicitud.
Cabeceras en solicitud
Establecer encabezados aquí

La biblioteca form-urlencoded me ayuda a arreglar eso (temporalmente).

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

@mzabriskie

¿No debería estar esto cerrado como arreglado?
Lo probé con los encabezados apropiados y se están configurando correctamente en la solicitud.
Cabeceras en solicitud
Establecer encabezados aquí

no, esto no se puede cerrar!!!
Todo el mundo se encuentra con el problema y no sabe dónde encontrar la solución. Debería funcionar sin establecer encabezados o se debe establecer un encabezado estándar.
Si no, se debe arrojar un error que muestre dónde está el problema.
También la documentación tiene que ser actualizada.

¡Todavía está roto!

Protuberancia. ¡Este error todavía está en su lugar y se siente genial!

protuberancia

¡Este bicho aún vive!

También estoy experimentando este error aquí.

todavía asqueroso aquí

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

Esto funciona para mí. Lo saqué de la aplicación que estoy desarrollando actualmente, esta parte es para verificar el recaptcha de Google.

Sigue teniendo el mismo problema...

La configuración como predeterminada no funciona:
axios.defaults.headers.common['Accept'] = 'application/json'; // working axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8'; // NOT working

Y también la configuración en la solicitud no funciona:
axios.get(url, { headers: { 'Content-Type': 'application/json;charset=UTF-8' } })

@aaroninn , este no parece ser el mismo problema, abra un nuevo problema si cree que su problema está relacionado con axios (que parece estar más relacionado con un uso básico de vuex para yo, pero no puedo estar seguro)

este hilo ya está lleno de +1 , no es necesario recopilar otros problemas aquí

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

@mzabriskie parece que usted es el autor de la confirmación que introdujo este problema, ¿no puede hacer nada al respecto (si ni siquiera entiende por qué lo hizo en primer lugar, podría/debería revertirlo, ¿Correcto?)

gracias de antemano

¡Es 2018! ¿Qué respuesta, arriba, no debería votar negativamente?

Dime otra vez por qué todos amamos a Axios.

¿Este problema necesita una solución? O es voluntario, pido, está abierto desde hace 2 años pero nadie lo arregló. ¿Es voluntario y no necesita ser arreglado?

@jeremycare Acabo de crear un PR para ese problema... Creo que es un "error" realmente molesto y debería solucionarse. Especialmente, es muy fácil arreglar esto y deshacerse de ese problema.

Chicos, creo que entiendo por qué este boleto sigue abierto.
Las personas que dicen que funciona para ellos ahora usan el módulo "qs", los que dicen que no funciona usan el módulo "cadena de consulta".
Veo que la gente también tiene problemas con los encabezados, este ticket tarda tanto en leer todo y es posible que no entienda todo sobre el problema en este ticket, pero si alguien no puede hacer que las solicitudes con los datos del formulario funcionen, verifique esto antes de intentar otras cosas:

Describió todo aquí: https://github.com/axios/axios/issues/1894

Es decepcionante ver que un intercambio de fetch nativo en los navegadores funciona instantáneamente con la configuración de Content-Type cuando Axios no puede configurarlo. La interoperabilidad entre plataformas fue su mayor punto de venta para mí.

Puedo ver en el método transformRequest que el encabezado está configurado pero nunca llega a la solicitud real. No puedo usar el módulo qs porque simplemente estoy enviando un cuerpo de texto.

Para reformular lo que estoy experimentando: no puedo configurar un encabezado Content-Type en el navegador usando axios ya que se sobrescribe. Estoy enviando una carga útil de cadena (sin datos de formulario), por lo que los módulos qs / querystring no son relevantes para mi caso.

¿Qué podemos hacer para arreglar esto?

EDITAR: Por ahora solo voy a usar fetch cuando esté en el navegador, pero esto niega todo el punto de usar axios para mí.

EDIT2: he creado mi propia biblioteca - capucha - para manejar mis solicitudes en múltiples entornos (dirigiéndose a Node/Browser/React-Native). De ninguna manera es un reemplazo para axios y su gran cantidad de funciones, pero es compatible con todos los elementos básicos.

Tengo el mismo problema. Y si configuro la clave para cualquier otra cosa, funciona, ¡excepto para "Tipo de contenido"! ¡Por favor ayuda!

De hecho, tuve que crear otra aplicación híbrida desordenada usando fetch en los navegadores y axios en el nodo y dentro de react-native. Parece gracioso que sea así y no al revés. Realmente espero ver que esto se aborde pronto para poder quitarme el parche de mono.

Creo que es importante darse cuenta de que esto definitivamente no es solo un problema con la cadena de consulta. El contenido de mi cuerpo es solo texto sin parámetros, pero no puedo enviarlo usando axios con un Content-Type .

Intenté usar la publicación, funciona bien, el valor predeterminado de la publicación es json

Estoy experimentando este error en este momento ... ¿entonces no hay solución para esto después de años? Guau...

Creé un PR que solucionaría el problema hace más de dos meses... ¡¿No entiendo por qué no se fusionó?!

Creé un PR que solucionaría el problema hace más de dos meses... ¡¿No entiendo por qué no se fusionó?!

Tenga en cuenta que nadie ha empujado nada desde septiembre del año pasado, ¿tal vez están buscando mantenedores? Además, creo que te perdiste una prueba cuando comparo tu PR con: https://github.com/axios/axios/pull/1544/files

@mzabriskie , ¿podría asumir la responsabilidad de fusionar una de estas relaciones públicas? Como actualmente, algunos programas requieren obtener solicitudes para tener un conjunto de tipo de contenido (parámetros RoR, por ejemplo: https://guides.rubyonrails.org/api_app.html#using-actiondispatch-request). La solución especificada en https://github.com/axios/axios/issues/362#issuecomment -229817415 parece ser el camino correcto a seguir y, sobre todo, resolvería todos los trucos desesperados como usar fetch para este caso de uso específico.

Me mudé al paquete got , ya que axios parece abandonado.

Entonces, Axios oficialmente no puede enviar solicitudes con 'Content-Type': 'application/x-www-form-urlencoded' o ¿la solución @ChBernat realmente funciona?

¿Hay alguna solución a este problema atm?

¿Hay alguna solución a este problema atm?

Busque un año aquí y verá muchas soluciones alternativas... Aunque recomendaría, como a otros y a mí mismo, pasar de axios. esta abandonado...

Vaya... deberían abandonar el proyecto en este punto, sé que lo estoy. ¿Casi 3 años desde que se informó originalmente el problema y ahora todavía estamos tratando de resolverlo? Increíble. Me encanta el código abierto, así que no guardo ningún rencor por este proyecto que no tiene mantenedores, pero... es usado por TONELADAS de personas, así que lo mínimo que puedes hacer es abandonarlo para que todos sepamos que este proyecto está muerto/moribundo. Gracias.

@justintime4tea ¿Tienes alguna recomendación nueva?

got

@kslr obtuvo o solicitó lo que todos los demás también comenzaron a migrar. Estoy tratando de quedarme con Axios, pero creo que terminará escribiendo una capa de abstracción sobre él para poder intercambiar la biblioteca de solicitud HTTP subyacente y luego, si uso una biblioteca diferente que tiene un "construido -in" cliente HTTP que usa, simplemente déjelo hacer lo suyo.

Intenté algo como esto y funcionó para mí.
Tal vez no sea la mejor solución, pero realmente puede ayudar (creo), cualquier sugerencia, si esta solución es horrible, es bienvenida.

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

He quitado el encabezado y parece que ha recibido bien.

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

Tuve dos problemas al usar RoR como backend.

Mi contexto:

Tenía un proyecto usando vue-resource desuso y todo funciona bien sin configuración adicional. Y ahora, estoy organizando las dependencias del proyecto y reemplazando las dependencias obsoletas, así que reemplacé vue-resource con axios ;)...

Pero tuvimos algunos problemas y a continuación compartiré lo que hago para resolver estos problemas. ¡Tal vez ayude a alguien! Lo siento si no te he ayudado como esperabas

Primer problema , el problema es el mismo que este problema, lo resolví usando:

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

Ahora, parámetros como:

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

se transformará en:
http://xxxx/?q%5Bsearch%5D=something&q%5Bsort%5D=asc

este analizado será:

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

Segundo problema , RoR está devolviendo una respuesta HTML en lugar de una respuesta JSON:

Este problema ocurre porque nuestro backend debe distinguir las solicitudes AJAX de otros tipos de solicitudes.

De forma predeterminada, vue-resource ya configuró el encabezado X-Requested-With como se esperaba. Pero, axios no. Entonces, tuve que definir esta clave en el encabezado de la solicitud. Mi configuración global de Axios fue la siguiente al 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';

===

Si usa Rails como backend y ninguna de las soluciones funcionó para usted, hágamelo saber, tal vez lo ayude =).

usa esto.. https://gist.github.com/akexorcist/ea93ee47d39cf94e77802bc39c46589b#gistcomment -2878451

Estoy trabajando en react-native y obtengo un error de solicitud incorrecta 400 cuando uso esto:
importar * como qs de 'cadena de consulta';
axios.post(url,qs.stringify({
'first_name': 'profundo',
'apellido': 'palotra',
}),{
encabezados: {
'Tipo de contenido': 'aplicación/x-www-form-urlencoded; juego de caracteres=UTF-8'
}
}).entonces((respuesta)=>{
console.log('funcionó')
}).catch((error)=>{
consola.log('error')
consola.log(error)
})

Entonces, ¿cómo resolver este problema?

alguna solución :(

Resuelto por qs

{ data: qs.stringify(bodyObject) }

Es triste ver que tanta gente está confundida en este tema. He hecho mi mejor esfuerzo para leer esos comentarios. Pero parece haber implicado muchos otros problemas.

Todos, perdónenme por cerrarlo. Si alguien puede abrir un nuevo problema para describir el problema claramente, será un gran agradecimiento para usted.

Hola a todos,

Pensé en intervenir ya que desperdicié casi un día completo de trabajo de mi vida tratando de resolver esto. Esto puede ayudar a algunos parcial o completamente, así que esperamos que sea útil.

Mi respuesta se deriva de ver varias razones por las que fallaba un POST con Axios que van desde:

1. 400 Petición Incorrecta
2. No se puede publicar con encabezados personalizados (como este hilo)
3. Necesidad de serializar/encadenar los datos/la carga útil

Estaba enfrentando el mismo problema que todos en este hilo con Bad Request 400 al pasar encabezados personalizados a Axios en la configuración como esta, y probé muchas de las respuestas aquí, como usar qs.stringify(), establecer datos en la configuración a nulo o {} en vano.

1) Nota: Agregar el bloque .catch() y registrar el error me ayudó mucho porque pude detectar un error que no era tan críptico. Pude usar el mensaje para depurar y, en última instancia, descubrir el problema que estaba teniendo.

2) Es importante en el bloque .then() devolver response.data , de lo contrario, se encontrará con este error:

Converting circular structure to JSON

Ahora mi problema era que el cuerpo POST de la API no era lo que quería el punto final, pero no pude verlo hasta que pude registrar el error.

Además, también estoy usando NestJS y HttpService, que es un envoltorio alrededor de Axios, y eso complicó aún más el problema porque el error real no estaba apareciendo en la devolución de llamada catchError en mi canalización.

Así que aquí está la solución tanto para Axios puros como para 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) Agregue el bloque .catch () para registrar correctamente el error real; de lo contrario, es 400 Bad Request
2) Asegúrese de que su firma de datos coincida con lo que espera la API. Esta es parte de la razón por la que existe un error, ya que un código 400 es una "Solicitud incorrecta".
3) Devuelva el response.data en el bloque .then() si está usando Axios, o en un operador de mapa si está usando NestJS o obtendrá el error Converting circular JSON

¡Perdón por la publicación larga y buena suerte a todos!

Salud

Estoy trabajando en react-native y obtengo un error de solicitud incorrecta 400 cuando uso esto:
importar * como qs de 'cadena de consulta';
axios.post(url,qs.stringify({
'first_name': 'profundo',
'apellido': 'palotra',
}),{
encabezados: {
'Tipo de contenido': 'aplicación/x-www-form-urlencoded; juego de caracteres=UTF-8'
}
}).entonces((respuesta)=>{
console.log('funcionó')
}).catch((error)=>{
consola.log('error')
consola.log(error)
})

este trabajo para mi. con consulta stringfy muchas gracias.
me salvas la vida

Puede usar una biblioteca como qs en su lugar:

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

Su solución está funcionando. ¡Muchas gracias!