Axios: コンテンツタイプアプリケーション/ 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ヘッダーが削除される理由はありますか？

回避策のオプションは、axiosリクエストを行うときにdataをdata || {}に変更することです。 これにより、データが未定義にならないようになります。

requestDataがundefined $の場合に$ Content-Typeを削除するロジックは、このコミットhttps://github.com/mzabriskie/axios/commit/9096d34186d5a5148f06c07854b21d6cc8035e96に含まれているようです。 ただし、なぜ追加されたのかはわかりません。

requestDataがundefinedで、メソッドがPUT 、 POST 、またはPATCHで、 Content-Typeがない場合に投票しますが設定されている場合、デフォルトのContent-Typeからapplication/x-www-form-urlencodedなります。 それ以外の場合は、指定されたものをすべて尊重します。

@mzabriskieしかし、@ alborozdが提供するコードスニペットでは、 dataはQuerystring.stringify({...})に設定されているので、 requestDataはundefinedであってはなりません。

@mzabriskieあなたが正しいと思います。 リクエストインターセプターを使用すると、フィドラーはデータが空であることを示します。 インターセプターがないと、データとヘッダーを確認でき、正常に機能します。

したがって、インターセプターを使用するときに問題が発生する可能性があります。

これをクラッシュさせるのにインターセプターは必要ありません。 コンテンツタイプヘッダーのデフォルト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'が空になっていることです。

ここに更新はありますか？ 今日、POSTがAPIに影響を与えていない理由を調査するのに1時間もかかりませんでした（その問題について思い出すまで）...または、それを修正する計画はなく、どこかに行く方が良いですか？

私は同じ問題を抱えています...まだ修正を待っています...

これはソリューションによって修正されていないため、 @ 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。

hyanmandianは14時間前にコメントしました
この問題を解決するために、qsライブラリでインターセプターを使用します。 私にとってはうまくいきます。

すばらしいですが、別のライブラリをインストールしてライブラリIMHOの問題を解決する方法ではありません。

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を使用して問題を解決しました：

static getToken（username、password）{
axios（{
メソッド： 'post'、
url： 'エンドポイント'、
データ： Username=${**encodeURIComponent**(username)}& password=${**encodeURIComponent**(password)}& Grant_type=password
}）

バンプ。 デフォルトを設定した場合、それらは常に尊重されると間違いなく想定されます。 Axiosは特定のコンテキストでデフォルトを確実に無視しており、貧しい人々に問題を引き起こしています。

これが発生した場所のより具体的なマージは次のとおりです： https ：//github.com/mzabriskie/axios/pull/195/files

この問題の+1。
Tomcat構成の何が問題になっているのかを理解するために、3時間以上費やしましたが、サーバーに向かう途中でヘッダーが盗まれたようです。 回避策は役に立ちませんでした。 神はヘッダーを保存します！

@polyakoffこれをどのように解決しましたか？それともまだ行き詰まっていますか？ 私が観察したのは、この問題が断続的に発生するということです

@usopanまだ立ち往生しています。

回避策として、この特定のリクエストの同形フェッチに移動しました。
ほとんどのブラウザでは問題なく動作しているようですが、特定のSafariバージョンでは動作しません。
私は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 querystring = require（ 'querystring'）;

ログインする（）{
var _this = this;
this。$ http（{
url：url、
メソッド： 'post'、
データ：querystring.stringify（{
メール：メール、
パスワード：パス
}）、
ヘッダー：{
'Content-Type'： 'application / x-www-form-urlencoded'
}
}）。then（function（response）{
console.log（response）;
}）。catch（function（error）{
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))

これは私にとってはうまくいくようです

こんにちはみんな！ 私は疑問に思っています、私はフォークを作り、小さなネイティブクエリ解析メソッドでソリューションを提供する必要がありますか？ クリエイターにとって良い「パターン」になるのでしょうか？ @mzabriskieそんなことを統合してみませんか？

この問題に取り組むために3時間以上を費やしてください.. @ Maxwell2022いくつかのサンプルデータを使用してコーディングできますか？

+1

1

+1

@bsjafferコードサンプルを投稿しましたが、他に何が必要ですか？

@ 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かっこいい、うまくいったことをうれしく思います。

_FastHubを使用してOnePlusONEPLUSA3003から送信されました_

+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はそれをPOSTリクエストの本文として設定します。

次のリクエストを行うことで、これをテストできます。

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

上記のコードと同じ結果になるはずです。

これがオープンしてからまだ1年以上修正されていません...

+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ケースを示す興味深い写真があります。 SIMPLEリクエストを送信する場合、OPTIONSリクエストは送信されません。 単純なリクエストは、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
これを行うだけ

const data = {名前： '私の名前'}
const form = 'data =' + JSON.stringfy（data）
axios.post（ '/ my_url'、form）

動作しませんが、上記の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

誰でもcontent-typeを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ではないオブジェクト（またはこれより前にチェックされる他のいくつかのタイプの1つ-FormDataがリストにあり、生で使用される）の場合、JSON.stringifiedになりますヘッダーがapplication / jsonに設定される可能性があります。
一方、文字列を渡すと、そのまま使用されるため、adeelibrの7月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

if（isset（$ _POST））{
$ fields_to_add = array（ 'name'、 'description'）;
$ response = json_decode（file_get_contents（ "php：// input"）、true）;
foreach（$ response as $ k => $ v）{
if（in_array（$ k、$ fields_to_add））{
$ _POST [$ k] = $ v;
}
}
echo json_encode（$ _POST）;
出口（）;
} そうしないと{
echo json_encode（array（ 'message' => '無効なリクエスト'））;
出口（）;
}
`` `

フィールド名をフィールド名のリストとして入力します。 それは自動的にそれをポストに変換します
お役に立てれば

+1

+1

+1

OMG😱アプリケーション/ x-www-form-urlencodedフォームデータを使用してPOSTリクエストを送信することは、このように非常に複雑であることを知りませんでした。 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ありがとうございます！

実際にこれを行うこともできます。 これは、axiosGithubページから直接取得されます。 エンコードされた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);
        });

「Content-Type」で文字セット（UTF-8）を定義し、上記の「インターセプター」ソリューションを変更しました。
最後にそれは動作します。

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

同僚の1人が私に勧めたので、私はaxiosから始めました。私にとっての最初の試みは、動作中のAPIからアクセストークンを取得することでした。 そして私はこのバグと衝突し、それからjQueryに戻りました（正直なところ、私はjQueryを非常に熱くしますが、それを強制されました）。 したがって、この古い未解決のバグよりも、人々をこのライブラリから逃げさせるためのより良い方法はないと思います。

ライブラリの作成は簡単な作業ではないことを私が知っている開発者として、このライブラリで行われたすべての作業に感謝します。いつかjQueryを停止して、ここに戻ってくることを望んでいます。

@HakamFostok apiトークンを取得するために本番環境でgithub / fetchを正常に使用しており、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'
        }
    });

これにより、ES6ではるかに優れたaxiosを使用できます;）

しかし、あなたは完全に正しいです。 このバグは何年も前に解決されているはずです。 何がそんなに長くかかっているのかわからない。

@HakamFostok @ Silver2611 qsの回避策が機能することを確認しました。これを使用して、トークンを取得します： https ：//github.com/Halceyon/aspnet-auth/blob/master/src/AspnetAuth.js

はい、「qs」の回避策は機能していますが、問題は、プロジェクトで「qs」を使用していないことです。 とにかく助けてくれてありがとう、私はこのライブラリを投げてajaxライブラリを使用することになりましたhttps://github.com/fdaciuk/ajaxそれははるかに優れています、そして私は皆にこのライブラリを取り除きそしてそこに移行することを勧めます。

qsは月に約6000万回ダウンロードされ、4.8Kbでgzip圧縮されます。
Express、body-parser、request、superagentなど、多くの人がそれに依存しています。プロジェクトに恐れることなく追加できます。

@HakamFostok私が知る限り、これはコアモジュールの一部であるため、ノードのバージョンが最新の場合は手動でインストールする必要はありません。

何年も前から解決されるべき問題の回避策を作成するためだけに、必要のないライブラリをインストールしたくありません。 参考までに、私のプロジェクトはReactプロジェクトではなく、ノードも使用していません。vue.jsでASP.NETMVCを使用しています。

「querystring」モジュールが組み込まれており、私が知る限り、同じことを行います。

@axios持続するこのバグはどうですか？

@HakamFostok私もvueを使用していますが、これはaxiosで完全に機能します。 async awaitを使用する場合、axiosには多くの利点があるため、qsの使用を検討してください。

問題はまだ発生しており、このようなqsを手動で使用する必要があります

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

これは本当にバグですか？ 私はaxiosを使用して2つの異なるプロジェクトで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を設定するaxiosの方法を処理する必要があるため、少しハッキーです。オブジェクトデータ。

axiosに「推測」させるのではなく、手動でContent-Typeを設定する機能が増えれば幸いです。

それは私たちのためにそれを「推測」するか、私たちが処理できるエラーをスローする必要があります。 現時点ではすべてが正常に見えますが、パランは明らかに正しくありません。 axiosを使用する初心者は、このようなエラーを追跡することはできません。 少なくとも、正しく文書化する必要があります。

+1この問題の追跡に2時間を費やしました。 少なくともreadmeでより良い説明/メモをいただければ幸いです。 qsが問題を解決した場合に更新されます。

更新：reactを使用して、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
ping @mzabriskie @nickuraltsev

nodejs側の問題は、依存関係の1つであるfollow-redirectsがcontent-typeヘッダーを削除していることです。

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

+1は間違いなくここで同じ問題に遭遇します

+1

これを最終的に修正して、ハックをqsとして使用しないようにします（ただし、qsは機能します）

Hej

1. maj 2018 23.31 skrev "Leonid Ershov" [email protected] ：

これを最終的に修正して、qsとしてハックを使用しないようにします

—
このスレッドにサブスクライブしているため、これを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/axios/axios/issues/362#issuecomment-390337824 、またはミュート
スレッド
https://github.com/notifications/unsubscribe-auth/AJZ-B0lPoCseiT4WNhJFlHVUTBHbmo9Yks5tzz3FgaJpZM4JAIfw
。

この問題は修正されないようです

ばかげ始めています！

「f ** kyou、私たちはこれを修正することは決してありません！」でもありません。 ：/

+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; charset = UTF-8 '}}
と
axiosオプションからtransformRequestを使用するだけです

transformRequest：[function（data）{return format（data）}]、

{a： "a"、b： "b"}を "a = a＆b = b"に解析するために使用されるフォーマット関数

+1、および上記のソリューションのいずれも機能しませんでした

+1

多くの人がまだこの問題の修正を待っているようですが、私も含めて、確かにこの時間の後に、これに対するいくつかの提案された解決策があるはずです。

反応中のqs.stringifyでこの問題を修正しました。

データをaxios.postに渡す前に、データをqs.stringifyする必要があります。

問題は、デフォルトでCSRFトークンがAxiosに共通ヘッダーとして登録されていることです。
この問題を解決するには

1- bootstrap.jsのこれらの行を置き換えます"

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

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

if（トークン）{
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-npmでqsモジュールをインストールするここをクリック

3-以下のようにqsの定数を定義します：
const qs = require（ 'qs'）;
4-次のようにdefultによってaxiosを使用します：
axios.post（ 'ここにあなたのリンク'、qs.stringify（{
'a1'： 'b1'、
'a2'： 'b2'
}））
.then（response => {

                     alert('ok');

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

これにより、axiosでコンテンツタイプを変更できないにもかかわらず、axiosを使用してフォームを送信することができました。

`` `
const {フルネーム、メール、パスワード、電話} = this.state;
axios（url、{
メソッド：「POST」、
ヘッダー：{
承認：「application / json」、
"Content-Type"： "application / x-www-form-urlencoded"
}、
データ：this.serialize（{
名前：フルネーム、
メール：メール、
パスワード：パスワード、
電話：電話
}）
}）
.then（response => {
console.log（response）;
}）
.catch（error => {
console.log（error.response）;
}）;

シリアル化= obj => {
str = [];
for（objにpを入れます）
if（obj.hasOwnProperty（p））{
str.push（encodeURIComponent（p）+ "=" + encodeURIComponent（obj [p]））;
}
str.join（ "＆"）;を返します。
};

バンプ。 ばかげて、何年も経っても、この厄介なバグはまだ修正されていません。

バンプ。 ここで同じ問題、必要なafを修正します。

@mzabriskie

これは修正されたように閉じられるべきではありませんか？
適切なヘッダーを使用してテストし、リクエストで正しく設定されています。
リクエストのヘッダー
ここでヘッダーを設定する

form-urlencodedライブラリは、それを修正するのに役立ちます（一時的に）。

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

@mzabriskie

これは修正されたように閉じられるべきではありませんか？
適切なヘッダーを使用してテストし、リクエストで正しく設定されています。
リクエストのヘッダー
ここでヘッダーを設定する

いいえ、これを閉じることはできません!!!
誰もが問題にぶつかっており、解決策を見つける場所がありません。 ヘッダーを設定せずに動作するか、標準ヘッダーを設定する必要があります。
そうでない場合は、問題がどこにあるかを示すエラーがスローされます。
また、ドキュメントを更新する必要があります。

まだ壊れています！

バンプ。 このバグはまだその場所にあり、素晴らしい気分です！

バンプ

このバグはまだ生きています！

私もここでこのバグを経験しています。

まだここで嫌です

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のreCAPTCHAを確認するためのものです。

まだ同じ問題があります...

デフォルトとしての設定が機能していません：
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

@mzabriskieあなたはこの問題を紹介したコミットの作者のようですが、それについては何もできません（そもそもなぜそれをしたのかさえ理解していない場合は、元に戻すことができます/すべきです、正しい？）

前もって感謝します

2018年です！ 上記のどの答えに反対票を投じるべきではありませんか？

なぜ私たち全員がAxiosを愛しているのか、もう一度教えてください。

この問題は修正が必要ですか？ またはそれは自発的です、私は尋ねています、それは2年以来開いていますが、誰もそれを修正しませんでした。 それは自発的であり、修正する必要はありませんか？

@jeremycare私はその問題のPRを作成するだけです...それは本当に厄介な「バグ」であり、修正する必要があると思います。 特に、これを修正してその問題を取り除くのは本当に簡単です。

皆さん、なぜこのチケットがまだ開いているのか理解できたと思います。
それが彼らのために働くと言う人々は今「qs」モジュールを使います、それが働かないと言う人々は「querystring」モジュールを使います。
ヘッダーに問題がある人もいますが、このチケットはすべてを読むのに長い間、このチケットの問題についてすべてを理解しているわけではないかもしれませんが、誰かがフォームデータを使用してリクエストを行うことができない場合は、他のことを試す前にこれをチェックしてください：

ここですべてを説明しました： https ：//github.com/axios/axios/issues/1894

Axiosが設定に失敗したときに、ブラウザでネイティブfetchのスワップインがContent-Typeの設定で即座に機能するのを見るのは、残念です。 プラットフォーム間の相互運用は、私にとって最大のセールスポイントでした。

transformRequestメソッドでヘッダーが設定されていることがわかりますが、実際のリクエストには到達しません。 テキストの本文を送信しているだけなので、qsモジュールを使用できません。

私が経験していることを言い換えると、axiosを使用してブラウザにContent-Typeヘッダーを設定することはできません。これは、上書きされるためです。 文字列ペイロード（formdataなし）を送信しているので、 qs / querystringモジュールは私の場合には関係ありません。

これを修正するために何ができますか？

編集：今のところ、ブラウザでフェッチを使用するだけですが、この種の方法では、axiosを使用することの全体的なポイントが否定されます。

EDIT2：複数の環境（Node / Browser / React-Nativeをターゲットとする）でリクエストを処理するために、独自のライブラリ（ cowl ）を構築しました。 これは、axiosとその豊富な機能に代わるものではありませんが、すべての基本をサポートしています。

同じ問題が発生しました。 そして、キーを他のものに設定すると、「Content-Type」を除いて機能します！ 助けてください！

私は実際に、ブラウザーのフェッチとノードおよびreact-native内のaxiosを使用して、さらに別の厄介なハイブリッドアプリを作成する必要がありました。 このようなものであり、その逆ではないのはおかしいようです。 モンキーパッチを外せるように、これがすぐに取り組むのを本当に望んでいます。

これは間違いなくクエリ文字列の問題だけではないことを理解することが重要だと思います。私の本文のコンテンツはパラメータのない生のテキストですが、 Content-Typeのaxiosを使用して送信することはできません。

postを使用してみましたが、正常に動作します。postのデフォルトはjsonです。

私は今このバグを経験しています...それで何年も後にこれに対する解決策はありませんか？ おお...

2ヶ月以上前に問題を解決するPRを作成しました...なぜマージされないのかわかりませんか？！

2ヶ月以上前に問題を解決するPRを作成しました...なぜマージされないのかわかりませんか？！

昨年の9月以来、誰も何もプッシュしていないことを覚えておいてください。おそらく彼らはメンテナを探しているのでしょうか。 また、PRをhttps://github.com/axios/axios/pull/1544/filesと比較すると、テストに失敗したと思います。

@mzabriskieこれらのPRの1つをマージする責任を負うことができますか？ 現在、一部のソフトウェアでは、コンテンツタイプを設定するためにgetリクエストが必要です（たとえば、RoRパラメーター：https：//guides.rubyonrails.org/api_app.html#using-actiondispatch-request）。 https://github.com/axios/axios/issues/362#issuecomment -229817415で指定されている解決策は、適切な方法のように思われ、この特定のユースケースでフェッチを使用するなど、すべての必死のハックを解決します。

axios gotページに移動しました。

したがって、Axiosは「Content-Type」を使用してリクエストを公式に送信できません：「application / x-www-form-urlencoded」または@ChBernatソリューションは実際に機能しますか？

この問題のATMに回避策はありますか？

この問題のATMに回避策はありますか？

ここで1年ルックアップすると、多くの回避策が表示されます...他の人や私も含めて、axiosから移動することをお勧めします。 それは放棄されました...

うわー...彼らはこの時点でプロジェクトを放棄する必要があります、私は知っています。 問題が最初に報告されてからほぼ3年が経ちましたが、今でもこの問題を解決しようとしていますか？ 信じられない。 私はオープンソースが大好きなので、このプロジェクトに悪い気持ちを抱くことはありませんが、メンテナがいません...それはたくさんの人々によって使用されているので、あなたができることは少なくともそれを放棄することです。 ありがとう。

@ justintime4tea新しい推奨事項はありますか？

got

@kslrが取得または要求したのは、他のすべての人も移行を開始したようです。 私はAxiosに固執しようとしていますが、基礎となるHTTPリクエストライブラリを交換できるように、その上に抽象化レイヤーを記述して、「ビルドされた」 -使用する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をバックエンドとして使用する際に2つの問題が発生しました。

私の文脈：

非推奨の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

2番目の問題、RoRはJSON応答ではなくHTML応答を返します。

この問題は、バックエンドがAJAXリクエストを他のタイプのリクエストと区別する必要があるために発生します。

デフォルトでは、 vue-resourceすでにX-Requested-Withヘッダーを期待どおりに設定しています。 しかし、axiosはそうではありません。 そのため、リクエストヘッダーでこのキーを定義する必要がありました。 私の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

これを使用すると、react-nativeに取り組んでいて、不正なリクエスト400エラーが発生します：
import * as qs from'querystring ';
axios.post（url、qs.stringify（{
'first_name'： 'deep'、
'last_name'： 'palotra'、
}）、{
ヘッダー：{
'Content-Type'： 'application / x-www-form-urlencoded; charset = UTF-8 '
}
}）。then（（response）=> {
console.log（ 'worked'）
}）。catch（（error）=> {
console.log（ 'エラー'）
console.log（エラー）
}）

では、この問題を解決するにはどうすればよいですか？

任意の解決策:(

qsによって解決

{ data: qs.stringify(bodyObject) }

非常に多くの人々がこの問題で混乱しているのを見て悲しいです。 私はそれらのコメントを読むために最善を尽くしました。 しかし、それは他の多くの問題を含んでいたようです。

みなさん、お許しください。 誰かが問題を明確に説明するために新しい問題を開くことができれば、それはあなたのおかげで本当に大きなものになります。

こんにちは、みなさん、

私はこれを解決するために私の人生のほぼ丸一日を無駄にしたので、私はチャイムを鳴らすだろうと思いました。 これは部分的または完全に役立つ可能性があるため、これが役立つことを願っています。

私の回答は、POSTがAxiosで失敗したさまざまな理由を次の範囲で確認したことから生じています。

1. 400不正な要求
2. カスタムヘッダー（このスレッドのように）で投稿することはできません
3. データ/ペイロードをシリアル化/文字列化する必要があります

このような構成でカスタムヘッダーをAxiosに渡すときに、このスレッドの全員と同じ問題に直面し、qs.stringify（）を使用して構成にデータを設定するなど、ここで多くの応答を試しました。 nullまたは{}を無効にします。

1）注-.catch（）ブロックを追加し、そのようにエラーをログに記録することは、それほど不可解ではないエラーを表面化することができたので、本当に役に立ちました。 メッセージを使用してデバッグし、最終的に自分が抱えていた問題を把握することができました。

2）.then（）ブロックでresponse.dataを返すことが重要です。そうしないと、次のエラーが発生します。

Converting circular structure to JSON

今の私の問題は、API POST本体がエンドポイントが望んでいたものではなかったということでしたが、エラーをログに記録できるようになるまでそれを見ることができませんでした。

さらに、NestJSとAxiosのラッパーであるHttpServiceも使用していますが、パイプの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)}');
});

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）.catch（）ブロックを追加して、実際のエラーを適切にログに記録します。それ以外の場合は、400 BadRequestです。
2）データ署名がAPIが期待しているものと一致していることを確認してください。 これは、コード400が「不正なリクエスト」であるためにエラーが存在する理由の一部です。
3）Axiosを使用している場合は.then（）ブロックで、NestJSを使用している場合はマップ演算子でresponse.dataを返します。そうしないと、 Converting circular JSONエラーが発生します。

長い投稿と皆さんの幸運をお詫びします！

乾杯

これを使用すると、react-nativeに取り組んでいて、不正なリクエスト400エラーが発生します：
import * as qs from'querystring ';
axios.post（url、qs.stringify（{
'first_name'： 'deep'、
'last_name'： 'palotra'、
}）、{
ヘッダー：{
'Content-Type'： 'application / x-www-form-urlencoded; charset = UTF-8 '
}
}）。then（（response）=> {
console.log（ 'worked'）
}）。catch（（error）=> {
console.log（ 'エラー'）
console.log（エラー）
}）

この仕事は私のために。 クエリstringfyでどうもありがとう。
あなたは私のライブを保存します

代わりにqsのようなライブラリを使用できます。

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

ソリューションは機能しています。 どうもありがとう！