Axios: Приложение Content-Type/x-www-form-urlencoded

Это должно работать, как вы показали. Похоже на ошибку. Я буду смотреть в него.

Причина - перехватчики. Я не могу отправить запрос с этим Content-Type только тогда, когда использую перехватчики.

Вот мой код:

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

Внутри перехватчика я вижу заголовок «Content-Type», но он не отправляется на сервер.
Правильно ли я использую перехватчики?

Есть новости по этому поводу? У меня такая же проблема. Axios не отправляет заголовок, который я установил.

Кажется, это строка виновника → https://github.com/mzabriskie/axios/blob/master/lib/adapters/xhr.js#L117

Есть идеи, почему заголовок Content-Type удаляется перед отправкой запроса?

Вариант обходного пути — изменить data на data || {} , когда вы делаете запрос axios. Это гарантирует, что данные не являются неопределенными.

Похоже, что логика удаления Content-Type , когда requestData равна undefined , появилась в этом коммите https://github.com/mzabriskie/axios/commit/9096d34186d5a5148f06c07854b21d6cc8035e96. Однако нет никаких указаний, почему он был добавлен.

Я бы проголосовал, если requestData равно undefined и метод PUT , POST или PATCH и нет Content-Type установлен, то по умолчанию Content-Type равен application/x-www-form-urlencoded . В противном случае просто соблюдайте все, что было указано.

@mzabrskie Но во фрагменте кода, предоставленном @alborozd , для data установлено значение Querystring.stringify({...}) , поэтому requestData не должно быть undefined , верно?

@mzabrskie Думаю, ты прав. Когда я использую перехватчик запросов, скрипач показывает, что данные пусты. Без перехватчика я вижу данные и заголовок, и все работает нормально.

Итак, вероятно, проблема возникает при работе с перехватчиками.

Никакой перехватчик не нужен, чтобы разбить эту штуку. Я установил значения по умолчанию для заголовка типа контента axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; и не могу отправить какую-либо полезную нагрузку в теле POST.

Я использовал обходной путь с URLSearchParams:

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

Но это не поддерживается Safari и IE.

Редактировать: Хорошо :) Следующее обновление обходного пути. Полный поддерживаемый обходной путь — отправить данные в виде строки запроса.
data: "flashcard=" + JSON.stringify(flashcard) + "&stackUri=" + stackUri . Больно, но работает 👍

Вместо этого вы можете использовать библиотеку, например qs:

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

это не решение. Какая разница, буду ли я использовать "Querystring" или "qs" ? Проблема в том, что заголовок ['Content-Type'] = 'application/x-www-form-urlencoded' пуст из-за перехватчиков.

Какие-нибудь обновления здесь? Потому что сегодня я потерял 1 час на изучение того, почему мои POST-сообщения не влияют на API (пока я не напомнил об этой проблеме)... Или нет никаких планов по исправлению этого, и лучше пойти куда-нибудь еще?

У меня такая же проблема...жду решения...

Пожалуйста, снова откройте @nickuraltsev , так как это не исправлено вашим решением.

+1 за проблему.

Я использую перехватчик с библиотекой qs для решения этой проблемы. У меня работает нормально.

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 за проблему.

yanmandian прокомментировал 14 часов назад
Я использую перехватчик с библиотекой qs для решения этой проблемы. У меня работает нормально.

Отлично, но ИМХО это не способ решить проблему в библиотеках, установив другую.

Вы можете просто добавить data: {} в конфиг, чтобы перехватчик не пропускал заголовки, которые мы указываем.

Вот что я сделал, и это сработало для меня:

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

Это изменило Content-Type с application/json на audio/x-wav для меня в заголовках запроса на вкладке сети.

Это уже исправлено? Кажется, я не могу установить свой Content-Type ни с одним из решений, опубликованных здесь.

У меня такая же проблема, помогите?

Я решил проблему с помощью encodeURIComponent :

статический getToken (имя пользователя, пароль) {
вернуть аксиомы ({
метод: 'пост',
URL: «конечные точки»,
данные: Username=${**encodeURIComponent**(username)}& password=${**encodeURIComponent**(password)}& Grant_type=password
})

удар. Можно было бы определенно предположить, что если установить значения по умолчанию, они всегда будут соблюдаться. Axios определенно игнорирует значения по умолчанию в определенных контекстах, вызывая проблемы у бедняков.

Вот более конкретное слияние, где это произошло: https://github.com/mzabriskie/axios/pull/195/files .

+1 за эту проблему.
Потратил более 3 часов, пытаясь выяснить, что не так с моей конфигурацией Tomcat, и, по-видимому, мои заголовки были украдены по пути к серверу. Обходные пути не помогли. Боже, храни заголовки!

@polyakoff , как ты решил это? Или ты все еще застрял. Что я заметил, так это то, что эта проблема возникает с перерывами

@usopan Все еще застрял.

Я перешел на isomorphic-fetch для этого конкретного запроса в качестве обходного пути.
Кажется, что все работает нормально в большинстве браузеров, но все еще не работает в некоторых версиях Safari.
Я начинаю думать, что Сафари меня обманывает.

+1 за эту проблему.

Я нашел решение. Решение состоит в том, чтобы обнаружить браузер.
В Chrome используйте - https://github.com/ljharb/qs для анализа данных json в строку и установки заголовка Content-Type.
В Safari используйте - FormData как тело и не устанавливайте заголовок Content-Type

Не могу представить, как такая проблема не решается уже более полугода.

вау хороший выпуск! все еще жду обновления ☕️

это отстой.

это отстой +1

+1

+1

+1

+1

+1

+1

+1

+1

+1

const строка_запроса = требуется('строка_запроса');

авторизоваться(){
вар _this = это;
это.$http({
адрес: адрес,
метод: 'пост',
данные: querystring.stringify({
электронная почта: электронная почта,
пароль: пройти
}),
заголовки: {
«Тип контента»: «application/x-www-form-urlencoded»
}
}).then(функция (ответ) {
console.log(ответ);
}).catch(функция (ошибка) {
console.log(ошибка);
});
}

+1

+1

+1

поэтому, чтобы подвести итог, любые запросы, отправленные с помощью Content-Type: application/x-www-form-urlencoded :

• Не кодировать полезную нагрузку автоматически
• Не устанавливая заголовок, даже если он был указан

Обходной путь, на данный момент, установите data: {} , чтобы заголовок был установлен, и вручную закодируйте полезную нагрузку данных запроса.

Я делюсь своим кодом:

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

Кажется, это работает для меня

Привет ребята! Мне интересно, должен ли я сделать вилку и предоставить решение с небольшим собственным методом анализа запросов? Будет ли это хорошим «шаблоном» для создателей? @mzabrskie Хотели бы вы интегрировать такую ​​​​вещь?

потратьте более 3 часов, чтобы разобраться с этой проблемой .. @Maxwell2022, не могли бы вы написать код с некоторыми примерами данных?

+1

1

+1

@bsjaffer Я разместил пример кода, что еще вам нужно?

@Maxwell2022 Maxwell2022 Теперь я в порядке.

+1

+1

+1

+1

+1

+1

+1

++1

Просто сделайте это, надеюсь, это поможет.

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

Да, вы угадали, +1

+1

+1

+1, решение reznord сотворило чудо (установка данных рядом с заголовками):
const config = { headers: { 'Content-Type': 'multipart/form-data' }, data: {} };

@bruddah круто, рад, что это сработало.

_Отправлено с моего OnePlus ONEPLUS A3003 с помощью FastHub _

+1

Использование qs работает для меня!

В React это сработало для меня:

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

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

Причина этого в том, что axios автоматически не кодирует почтовые данные перед добавлением их в тело HTTP-запроса, поэтому их необходимо кодировать перед отправкой запроса. Это то, что делает строка запроса. Он принимает {id:32, name:'john'} и выдает что-то вроде id=32&name=john , а затем axios устанавливает это как тело почтового запроса.

Вы можете проверить это, выполнив следующий запрос:

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

Это должно иметь тот же результат, что и код выше.

до сих пор не исправлено больше года с момента открытия....

+1

+1

Привет ребят! Вы можете попробовать это, у меня это работает нормально, но я не знаю, почему.

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

Попытка отправить _Content- Type:application/json-patch+json_ в запросе исправления (в соответствии с RFC6902 ),
у меня сработало следующее (у меня правильный тип в заголовках запросов):

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

Для тех, у кого возникла эта проблема из-за того, что перехватчик перезаписывает заголовки, просто используйте их в своем перехватчике:

config.header['yourheader'] = value;

вместо

config.header = {'yourheader': value}

Решение @DavidJiang7 должно работать

Это работает для меня:

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

Интересная картинка, показывающая кейсы CORS ЗДЕСЬ . Запрос OPTIONS не будет отправлен, когда мы отправим запрос SIMPLE. Простой запрос — это запрос GET, HEAD, POST с заголовком content-type , равным application/x-www-form-urlencoded , multipart/form-data или text/plain и любыми пользовательскими заголовками.

Просто сделай это

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

Отредактировано
извините за опечатку. и это работает для меня, я использую это в течение нескольких месяцев.
Я забыл упомянуть, что на сервере у вас есть только параметр data

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

бамп для чистого решения, готовы помочь, а также.

@jesusantguerrero
Просто сделай это

константные данные = {имя: 'мое имя'}
константная форма = 'данные =' + JSON.stringfy (данные)
axios.post('/my_url', форма)

не работает, но это JSON.stringify ^^опечатка выше.

Для тех из вас, кто использует Node.js, это работает. Спасибо всем в теме, я в основном объединил кучу народных решений и ссылается на документы Node.js.

Это самое чистое, что я мог придумать.

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

использовать параметры вместо данных

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
использовать параметры вместо данных

Если это работает, это самое чистое решение на сегодняшний день.

@oshalygin устанавливает параметры в строку запроса, а не отправляет в виде переменных сообщения.

Библиотека ajax, которая не может опубликовать простую форму? Действительно?

1

кто-нибудь знает, кому установить тип контента в application/json.

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

это не работает.

@hellomrbigshot , вероятно, проблема с CORS (читайте об этом также в этой теме)

Проблемный фрагмент кода в Axios для меня (проблемы с получением полезной нагрузки без использования URLSearchParams) выглядит следующим образом:

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

Итак, если data является объектом, который не является URLSearchParam (или одним из нескольких других типов, которые проверяются до этого — FormData находится в списке и используется в необработанном виде), тогда он будет JSON.stringified и может привести к тому, что заголовок будет установлен на application/json.
С другой стороны, если я передаю строку, то она просто используется как есть, поэтому комментарий adeelibr от 4 июля — это тот, который работает для меня и моих данных формы.

Они должны предоставить тип заголовка по умолчанию. Я решил эту проблему, используя этот код.
это мой код vue + axios на стороне клиента

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

если ( isset( $_POST )) {
$fields_to_add = массив («имя», «описание»);
$response = json_decode(file_get_contents("php://input"), true);
foreach ($ответ как $k => $v) {
если(in_array($k, $fields_to_add)){
$_POST[$k] = $v;
}
}
эхо json_encode($_POST);
выход();
} еще{
echo json_encode(array('message' => 'Invalid Request'));
выход();
}
```

Поместите имена полей в виде списка имен полей. Он автоматически преобразует его в сообщение
Надеюсь это поможет

+1

+1

+1

OMG 😱 Я не знал, что отправка POST-запроса с некоторыми данными формы application/x-www-form-urlencoded настолько сложна, как это. Мне приходится много раз перечитывать README и неправильно понимать, что поле данных конфигурации можно использовать с qs.stringify(), а также с полем params.

На данный момент кажется, что только методы экземпляра поддерживают отправку данных формы x-www-form-urlencoded , таких как:

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

+1

не решено!

Он открыт как... навсегда. Старая библиотека запросов делала это настолько простым.

+1

+1

+1

Вот простой способ сделать это.
Прежде всего, прочитайте здесь: https://github.com/axios/axios#using -applicationx-www-form-urlencoded-format

Вот исправление:

1. Перейдите по ссылке: https://github.com/WebReflection/url-search-params

2. Вы можете установить его с помощью npm или просто скачать библиотеку отсюда: https://github.com/WebReflection/url-search-params/blob/master/build/url-search-params.js .

3. Если вы загрузили библиотеку, просто включите ее в свой файл.

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

1. Затем сделайте запрос POST следующим образом:

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

Это будет работать как шарм! :+1:

@aditya43 Спасибо!

На самом деле вы тоже можете это сделать. Это происходит прямо со страницы axios Github. Вам придется создать закодированный URL-адрес самостоятельно, но я только что проверил его, и он работает.

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

Эта ошибка все еще существует, какие-либо обновления?

@ DZuz14 Пробую, не работает. Использование глобальных переменных axios для каждого экземпляра и ничего.
Похоже, он жестко запрограммирован.

+1

axios отстой, используйте запрос на замену

+1

Это работает!

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

Я определил кодировку (UTF-8) в «Content-Type» и изменил приведенное выше решение «перехватчиков».
Наконец это работает.

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

Я нашел только случаи cors, сбой отправки заголовков запроса параметров, установленный междоменный сбой, за которым операция не будет реализована.

+1

+1

+1

+1

+1

+1

+1

+1

+1

+1

Я начал с axios, как мне его порекомендовал один из моих коллег, и первой моей попыткой было получить токен доступа из работающего API. и я столкнулся с этим багом, и тогда я вернулся к jQuery, (честно говоря, я так сильно нагреваю jQuery, но он был вынужден это сделать). Поэтому я думаю, что нет лучшего способа заставить людей бежать из этой библиотеки, чем этот старый, нерешенный баг.

Я ценю всю работу, проделанную в этой библиотеке, как разработчик я знаю, что создание библиотеки — нетривиальная задача, и я надеюсь однажды подвести jQuery и вернуться сюда снова.

@HakamFostok Я успешно использую github/fetch в производстве для получения токена API, который вы можете изучить как альтернативу jquery.
https://github.com/github/fetch

@usopan большое спасибо, посмотрю

@HakamFostok
Самый простой способ обойти эту ошибку — использовать QS. Вам не нужно устанавливать qs, просто используйте его напрямую с 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'
        }
    });

При этом вы можете использовать axios, которые намного лучше с ES6;)

Но вы совершенно правы. Эта ошибка должна была быть решена давным-давно. Не знаю, что у них так долго.

@HakamFostok @Silve2611 Я подтверждаю, что обходной путь qs работает, я использую его для получения токенов здесь: https://github.com/Halceyon/aspnet-auth/blob/master/src/AspnetAuth.js

Да, обходной путь «qs» работает, НО проблема в том, что я не использую «qs» в проекте. в любом случае спасибо за помощь, в итоге я выбросил эту библиотеку и использовал библиотеку ajax https://github.com/fdaciuk/ajax , она намного лучше, и я призываю всех избавиться от этой библиотеки и перейти на нее.

qs загружается почти 60 миллионов раз в месяц, он имеет размер 4,8 КБ в сжатом виде.
От него зависят Express, body-parser, request, superagent и многие другие, вы можете без опасений добавлять его в свой проект.

@HakamFostok Насколько мне известно, это часть основного модуля, поэтому вам не нужно устанавливать его вручную, если версия вашего узла обновлена.

Я просто не хочу устанавливать какую-либо библиотеку, которая мне не нужна, просто чтобы создать обходной путь для проблемы, которая должна быть решена много лет назад. Просто для вашей информации: мой проект не является проектом React, и я не использую узел, я использую ASP.NET MVC с vue.js

Модуль "querystring" встроен, и, насколько я знаю, он делает то же самое.

@axios А как насчет этой ошибки, которая сохраняется?

@HakamFostok Я также использую vue, и он действительно отлично работает с axios. Подумайте об использовании qs, потому что у axios есть много преимуществ, если вы хотите использовать асинхронное ожидание.

Проблема все еще возникает, и мне приходится вручную использовать qs, подобные этому

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

Это действительно даже ошибка? Я делаю URL-адрес, закодированный в двух разных проектах с помощью axios, и он отлично работает. Комментарий, который я разместил здесь ранее, — это единственное, что я установил, и это работает.

Конечно это баг! Это не работает, как описано в документах. Также не имеет смысла добавлять дополнительный шаг для чего-то, что явно должно обрабатываться аксиомами. Другие методы не требуют шага.

Да, это не имеет смысла, когда вам нужно добавить дополнительный шаг.
Если я хочу опубликовать

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

Я должен написать так

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

У меня была такая же проблема с установкой Content-Type в application/vnd.api+json , аналогично #340, которая, к сожалению, была закрыта без разрешения.

Мой обходной путь заключался в том, чтобы упорядочить данные объекта, чтобы отправить Content-Type , что немного хакерски, поскольку нам пришлось бы иметь дело с аксиальным способом установки application/json;charset=utf-8 при работе с данные объекта.

Надеюсь, у нас будет больше возможностей вручную установить Content-Type , а не заставлять axios «угадывать» это за нас.

Он должен «угадать» это для нас или выдать ошибку, которую мы можем обработать. На данный момент все выглядит нормально, но параметры явно не корректны. Новичок, работающий с axios, не сможет отследить такую ​​ошибку. По крайней мере, это должно быть правильно задокументировано.

+1 Только что потратил 2 часа на отслеживание этой проблемы. По крайней мере, был бы признателен за лучшее объяснение / примечание в файле readme. Обновлю, если qs решит проблему.

ОБНОВЛЕНИЕ: используя реакцию, у меня сработал qs. Это было моим решением. В моем случае мне нужны были как параметры формы, так и параметр запроса.

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

Мне нужно было использовать Axios с React для выполнения процесса входа в систему, и после нескольких часов борьбы с этой проблемой решение состояло в том, чтобы создать независимо объекты, необходимые для выполнения запроса.

Ошибка была: unsupported_grant_type

Эта работа.

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

Этот другой способ не работает.

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

@ harvic3 , вы можете проверить мой рабочий код. Также вам не нужен конкретный заголовок.

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

Прошло 2 года, а этот баг до сих пор не устранен

+1

+1

+1 проблема осталась

+1

+1
пинг @mzabrskie @nickuraltsev

Проблема на стороне nodejs заключается в том, что одна из зависимостей follow-redirects удаляет заголовок типа контента:

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

+1 определенно столкнулся с той же проблемой здесь

+1

исправьте это, наконец, чтобы не использовать хаки как qs (но да, qs работает)

Хей

1. май 2018 23.31 скрев "Леонид Ершов" [email protected] :

исправьте это, наконец, чтобы не использовать хаки как qs

—
Вы получаете это, потому что подписаны на эту тему.
Ответьте на это письмо напрямую, просмотрите его на GitHub
https://github.com/axios/axios/issues/362#issuecomment-390337824 или отключить звук
нить
https://github.com/notifications/unsubscribe-auth/AJZ-B0lPoCseiT4WNhJFlHVUTBHbmo9Yks5tzz3FgaJpZM4JAIfw
.

Похоже, эта проблема не будет решена

Это начинает становиться смешным!

Даже не "пошел ты, мы никогда не исправим это!" :/

+1

+1

Кажется, какой-то герой исправил это и создал особую версию "aaxios".
Разрешить настройку типа контента
Однако не проверял, перешел к извлечению

+1

+1

+1

+1

👍
как сказал @camposjorge , мы можем увидеть исправление (скоро?) благодаря https://github.com/axios/axios/pull/1544 .

нет исправления?

+1

решил это! это не проблема аксиом, просто о перекрестном происхождении

set { headers: {'Content-Type': 'application/x-www-form-urlencoded; кодировка = UTF-8'}}
а также
просто используйте transformRequest из параметров axios

transformRequest: [функция (данные) { возвращаемый формат (данные) }],

функция форматирования, используемая для синтаксического анализа {a:"a",b:"b"} до "a=a&b=b"

+1, и ни одно из вышеперечисленных решений не сработало

+1

Похоже, что многие люди все еще ждут решения этой проблемы, в том числе и я - наверняка после всего этого времени должно быть какое-то предлагаемое решение этой проблемы.

исправлена ​​​​эта проблема с qs.stringify в реакции.

вам просто нужно qs.stringify данные перед передачей их в axios.post

проблема в том, что по умолчанию токен CSRF регистрируется как общий заголовок с Axios, поэтому
решить эту проблему

1- заменить эти строки в bootstrap.js "

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

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

если (токен) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} еще {
console.error('Токен CSRF не найден: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
"
по этой строке"
window.axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
"
2- установите модуль qs с помощью npm, нажмите здесь

3- определить константу qs, как показано ниже:
const qs = требуется ('qs');
4- используйте аксиомы по умолчанию следующим образом:
axios.post('ваша ссылка здесь',qs.stringify({
'а1': 'б1',
'а2':'б2'
}))
.тогда (ответ => {

                     alert('ok');

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

Благодаря этому я смог отправить форму, используя axios, несмотря на то, что тип контента не может быть изменен на axios.

```
const {полное имя, электронная почта, пароль, телефон} = this.state;
аксиомы(url, {
метод: "ПОСТ",
заголовки: {
Принять: "приложение/json",
"Content-Type": "application/x-www-form-urlencoded"
},
данные: this.serialize({
имя: полное имя,
электронная почта: электронная почта,
пароль: пароль,
телефон: телефон
})
})
.тогда (ответ => {
console.log(ответ);
})
.поймать (ошибка => {
console.log(ошибка.ответ);
});

сериализовать = объект => {
пусть ул = [];
for (пусть p в obj)
если (obj.hasOwnProperty(p)) {
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
}
вернуть str.join("&");
};

Удар. Смешно, но по прошествии многих лет эта досадная ошибка до сих пор не исправлена.

Удар. Та же проблема здесь, исправьте требуемый af.

@мзабриски

Разве это не должно быть закрыто как исправленное?
Протестировано с соответствующими заголовками, и они правильно устанавливаются в запросе.
Заголовки в запросе
Настройка заголовков здесь

библиотека form-urlencoded помогла мне это исправить (на время).

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

@мзабриски

Разве это не должно быть закрыто как исправленное?
Протестировано с соответствующими заголовками, и они правильно устанавливаются в запросе.
Заголовки в запросе
Настройка заголовков здесь

нет нельзя закрыть!!!
Все сталкиваются с проблемой и не знают, где найти решение. Он должен работать без установки заголовков или должен быть установлен стандартный заголовок.
В противном случае должна быть выдана ошибка, показывающая, в чем проблема.
Также необходимо обновить документацию.

Он все еще сломан!

Удар. Эта ошибка все еще на своем месте и чувствует себя прекрасно!

удар

Этот баг до сих пор жив!

Я также испытываю эту ошибку здесь.

все еще отвратительно здесь

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

Это работает для меня. Я скопировал его из приложения, которое я сейчас разрабатываю, эта часть предназначена для проверки рекапчи Google.

До сих пор такая же проблема...

Установка по умолчанию не работает:
axios.defaults.headers.common['Accept'] = 'application/json'; // working axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8'; // NOT working

А также настройка в запросе не работает:
axios.get(url, { headers: { 'Content-Type': 'application/json;charset=UTF-8' } })

@aaroninn это не похоже на ту же проблему, пожалуйста, откройте новую проблему, если вы считаете, что ваша проблема связана с axios (что, похоже, больше связано с базовым использованием vuex для я, но я не уверен)

эта ветка уже заполнена +1 , не нужно собирать здесь другие вопросы

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

@mzabrskie кажется, что вы являетесь автором фиксации, которая представила эту проблему, вы не можете ничего с этим поделать (если вы даже не понимаете, почему вы это сделали в первую очередь, вы могли бы / должны отменить это, правильно?)

заранее спасибо

Это 2018 год! Какой ответ выше я не должен отрицать?

Скажи мне еще раз, почему мы все любим Axios?

Эта проблема нуждается в исправлении? Или это добровольно, я спрашиваю, он открыт с 2 лет, но никто его не починил. Является ли это добровольным и не нуждается в исправлении?

@jeremycare Я просто создаю PR для этой проблемы ... Я думаю, что это действительно раздражающая «ошибка», и ее следует исправить. Особенно это очень легко исправить и избавиться от этой проблемы.

Ребята, кажется, я понимаю, почему этот тикет до сих пор открыт.
Люди, которые говорят, что у них это работает, теперь используют модуль «qs», те, кто говорит, что это не работает, используют модуль «querystring».
Я вижу, что у людей также возникают проблемы с заголовками, этот тикет так долго читает все, и, может быть, я не все понимаю о проблеме в этом тикете, но если кто-то не может делать запросы с данными формы, проверьте это, прежде чем пытаться что-то еще:

Описал все здесь: https://github.com/axios/axios/issues/1894

Разочаровывает тот факт, что замена нативных fetch в браузерах мгновенно работает с настройкой Content-Type , когда Axios не может ее установить. Взаимодействие между платформами было для меня самым большим преимуществом.

Я вижу в методе transformRequest , что заголовок установлен, но он никогда не доходит до фактического запроса. Я не могу использовать модуль qs, так как просто отправляю текст.

Перефразируя то, что я испытываю: я не могу установить заголовок Content-Type в браузере с помощью axios, поскольку он перезаписывается. Я отправляю строковую полезную нагрузку (без данных формы), поэтому модули qs / querystring не подходят для моего случая.

Что мы можем сделать, чтобы исправить это?

РЕДАКТИРОВАТЬ: Пока я просто собираюсь использовать выборку в браузере, но это сводит на нет весь смысл использования axios для меня.

РЕДАКТИРОВАТЬ 2: я создал свою собственную библиотеку - обложку - для обработки моих запросов в нескольких средах (нацеленных на Node/Browser/React-Native). Это ни в коем случае не замена axios с его множеством функций, но он поддерживает все основные функции.

Получил ту же проблему. И если я устанавливаю ключ на что-нибудь еще, он работает, кроме «Content-Type»! Пожалуйста помоги!

На самом деле мне пришлось создать еще одно беспорядочное гибридное приложение, используя выборку в браузерах и аксиомы в узле и в React-Native. Забавно, что именно так, а не наоборот. Очень надеюсь, что скоро это будет решено, чтобы я мог удалить свою обезьянью нашивку.

Я думаю, важно понимать, что это определенно проблема не только строки запроса. Содержимое моего тела — это просто необработанный текст без параметров, но я не могу отправить его с помощью axios с Content-Type .

Я пробовал использовать post, он отлично работает, по умолчанию для поста используется json.

Я испытываю эту ошибку прямо сейчас ... так что нет ли решения для этого спустя годы? Вот это да...

Я создал PR, который устранил бы проблему более двух месяцев назад... Я не понимаю, почему это не сливается?!

Я создал PR, который устранил бы проблему более двух месяцев назад... Я не понимаю, почему это не сливается?!

Имейте в виду, что с сентября прошлого года никто ничего не продвигал, может быть, они ищут сопровождающих? Кроме того, я думаю, что вы пропустили тест, когда я сравниваю ваш PR с: https://github.com/axios/axios/pull/1544/files

@mzabrskie , не могли бы вы взять на себя ответственность за объединение одного из этих PR? Поскольку в настоящее время некоторое программное обеспечение требует, чтобы запросы на получение имели набор типов контента (например, параметры RoR: https://guides.rubyonrails.org/api_app.html#using-actiondispatch-request). Решение, указанное в https://github.com/axios/axios/issues/362#issuecomment -229817415, кажется правильным, и оно больше всего решит все отчаянные взломы, такие как использование выборки для этого конкретного случая использования.

Я перешел на страницу got , так как axios кажется заброшенным.

Итак, Axios официально не может отправлять запросы с «Content-Type»: «application/x-www-form-urlencoded» или решение @ChBernat действительно работает?

Есть ли обходной путь по этой проблеме?

Есть ли обходной путь по этой проблеме?

Посмотрите год назад, и вы увидите множество обходных путей ... Хотя я бы рекомендовал, как и другие, и я, отказаться от axios. Он заброшен...

Вау... они должны просто отказаться от проекта в этот момент, я знаю, что я. Прошло почти 3 года с момента первоначального сообщения о проблеме, и теперь мы все еще пытаемся решить эту проблему? Невероятный. Я люблю открытый исходный код, поэтому я не питаю никаких обид к этому проекту, у меня нет сопровождающих, но... он используется МНОЖЕСТВОМ людей, так что самое меньшее, что вы можете сделать, это отказаться от него, чтобы мы все знали, что этот проект мертв/умирает. Спасибо.

@justintime4tea У вас есть новая рекомендация?

got

@kslr получил или запрос похож на то, что все остальные тоже начали мигрировать. Я пытаюсь придерживаться Axios, но я думаю, что в конечном итоге это сведется к тому, что я просто напишу некоторый уровень абстракции поверх него, чтобы я мог поменять базовую библиотеку HTTP-запросов, а затем, если я использую другую библиотеку, которая имеет «встроенный -in" HTTP-клиент, который он использует, просто позвольте ему делать свое дело.

Я пробовал что-то подобное и работал на меня.
Возможно, это не лучшее решение, но оно действительно может помочь (я думаю), любое предложение, если это решение ужасно, приветствуется.

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

Я удалил заголовок, и, похоже, он был принят хорошо.

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

У меня было две проблемы с использованием RoR в качестве бэкэнда.

Мой контекст:

У меня был проект с использованием устаревших vue-resource , и все работает нормально без дополнительной настройки. И теперь я организую зависимости проекта и заменяю устаревшие зависимости, поэтому я заменил vue-resource на axios ;)...

Но у нас были некоторые проблемы, и ниже я поделюсь тем, что я делаю, чтобы решить эти проблемы. Может кому поможет! Извините, если я не помог вам, как вы ожидали

Первая проблема , проблема такая же, как и эта проблема, которую я решил, используя:

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

Теперь такие параметры, как:

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

будет преобразовано в:
http://xxxx/?q%5Bsearch%5D=something&q%5Bsort%5D=asc

этот анализ будет:

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

Вторая проблема : RoR возвращает ответ HTML вместо ответа JSON:

Эта проблема возникает из-за того, что наш сервер должен отличать запросы AJAX от других типов запросов.

По умолчанию vue-resource уже установил заголовок X-Requested-With , как и ожидалось. Но, аксиос нет. Итак, мне пришлось определить этот ключ в заголовке запроса. Моя глобальная конфигурация Axios в итоге была следующей:

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

===

Если вы используете Rails в качестве бэкенда и ни одно из решений не сработало для вас, дайте мне знать, может быть, я вам помогу =).

используйте это .. https://gist.github.com/akexorcist/ea93ee47d39cf94e77802bc39c46589b#gistcomment -2878451

Я работаю над реакцией и получаю ошибку 400 неверного запроса при использовании этого:
импортировать * как qs из 'querystring';
axios.post(url,qs.stringify({
'first_name': 'глубокий',
'last_name': 'палотра',
}), {
заголовки: {
«Тип контента»: «application/x-www-form-urlencoded; кодировка = UTF-8'
}
}).then((ответ)=>{
console.log('работает')
}).catch((ошибка)=>{
console.log('ошибка')
console.log(ошибка)
})

Итак, как решить эту проблему?

любое решение :(

Решено qs

{ data: qs.stringify(bodyObject) }

Грустно видеть, что так много людей запутались в этом вопросе. Я изо всех сил старался читать эти комментарии. Но, похоже, это связано со многими другими проблемами.

Все, простите, что закрыл. Если кто-то сможет открыть новый выпуск, чтобы четко описать проблему, это будет вам очень большое спасибо.

Всем привет,

Я подумал, что вмешаюсь, так как потратил почти полный рабочий день своей жизни, пытаясь решить эту проблему. Это может помочь некоторым частично или полностью, поэтому мы надеемся, что это будет полезно.

Мой ответ проистекает из того, что я увидел различные причины, по которым POST не работал с Axios, начиная от:

1. ошибка 400, неверный запрос
2. Не могу публиковать сообщения с пользовательскими заголовками (например, в этой теме)
3. Необходимо сериализовать/упорядочить данные/полезную нагрузку

Я столкнулся с той же проблемой, что и все в этом потоке, с Bad Request 400 при передаче пользовательских заголовков в Axios в конфигурации, подобной этой, и попробовал многие из ответов здесь, например, используя qs.stringify(), установка данных в конфигурации на null или {} безрезультатно.

1) Примечание. Добавление блока .catch() и регистрация ошибки действительно помогли мне, потому что я смог обнаружить ошибку, которая не была такой загадочной. Я смог использовать сообщение для отладки и, в конечном итоге, выяснить проблему, с которой я столкнулся.

2) Важно в блоке .then() вернуть response.data , иначе вы столкнетесь с этой ошибкой:

Converting circular structure to JSON

Теперь моя проблема заключалась в том, что тело API POST было не тем, что хотела конечная точка, но я не мог его увидеть, пока не смог зарегистрировать ошибку.

Кроме того, я также использую NestJS и HttpService, который является оболочкой для Axios, и это еще больше усложняет проблему, потому что реальная ошибка не всплывала в обратном вызове catchError в моем канале.

Итак, вот решение как для чистого Axios, так и для NestJS.

Аксиос:

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

ГнездоJS:

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) Добавьте блок .catch(), чтобы правильно зарегистрировать реальную ошибку, иначе это 400 Bad Request.
2) Убедитесь, что ваша подпись данных соответствует ожиданиям API. Это одна из причин возникновения ошибки, поскольку код 400 является «неверным запросом».
3) Верните response.data в блоке .then(), если вы используете Axios, или в операторе карты, если вы используете NestJS, иначе вы получите ошибку Converting circular JSON

Извините за длинный пост и всем удачи!

Ваше здоровье

Я работаю над реакцией и получаю ошибку 400 неверного запроса при использовании этого:
импортировать * как qs из 'querystring';
axios.post(url,qs.stringify({
'first_name': 'глубокий',
'last_name': 'палотра',
}), {
заголовки: {
«Тип контента»: «application/x-www-form-urlencoded; кодировка = UTF-8'
}
}).then((ответ)=>{
console.log('работает')
}).catch((ошибка)=>{
console.log('ошибка')
console.log(ошибка)
})

эта работа для меня. с запросом stringfy большое спасибо.
ты спас мою жизнь

Вместо этого вы можете использовать библиотеку, например qs:

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

Ваше решение работает. Большое спасибо!