Axios: axiosでデータをPOSTできません

@ awais-ilyas、通常はPOSTペイロードを文字列化するとは思わない。 これを試して：

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

POST本文にdataを設定する必要があります。

私は最近、AJAX作業にjQueryを使用することからAxiosに移行し始めました。それは、それが大流行しているように思われるからです。 しかし、単純なPOSTができないことを知ってショックを受けました。

だから、これが私が最初に試したものです：

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

バックエンド（PHPを使用）では、$ _POSTは完全に空でした。 だから私はグーグルをしました、そしてこれはうまくいきます（ポリフィルを使って、ため息をつきます）：

const params = new URLSearchParams();
params.append('event_id', eventId);
params.append('item_id', itemId);
params.append('description', description);
axios({
  method: 'post',
  url: '/api/event/item',
  data: params
});

これは機能します。 だから私はURLSearchParamsを使う必要がありますか？ ドキュメントには最初の方法が機能するはずであることが示されているため、これはイライラしました。

他にこの問題を抱えている人はいますか？

@dlgoodchildフォームデータとして送信しようとしていますか？ POST本体も空であることがわかりましたが、これを使用してフォームのようなものに変換する必要がありました。

   ...
      data: params,
      transformRequest: [
        function(data, headers) {
          const serializedData = []

          for (const k in data) {
            if (data[k]) {
              serializedData.push(`${k}=${encodeURIComponent(data[k])}`)
            }
          }

          return serializedData.join('&')
        }
      ],
   ...

同意しました。POST機能には作業が必要です。

ああ良いアプローチ！ ここに着陸する人の利益のために、最終的に私は3つのバリエーションでそれを使用して動作させました：

1. FormData
2. URLSearchParams
3. querystring.stringify（ノードの一部）

最初の2つのオプションの問題は、ブラウザーの互換性です（caniuse.comで確認してください）。 最後は別の依存関係です。

私はtransformRequestオプションを知りませんでした。これは見栄えがよく、依存関係を最小限に抑え、特に古いバージョンでクロスブラウザーで作業したい場合に最適なオプションです。

ドキュメントは、Axiosを多くの人にとって苛立たせるものだと思います。 Axiosを使用したPOSTに関連するStackOverflowの質問の数は、どこかに問題があり、一般的な誤解があることを示しています。

同じ問題があります-研究に数時間を費やし、ついにこの問題を発見しました。 考え：POSTは複雑であってはならず、依存関係や追加の構成を必要とすべきではありません。 これは、AngularJS1のように感じられます。 とりあえず、このライブラリの使用を引き継ぎます。

@ yuri-wisestampはこれ以上同意できませんでした。これは非常に奇妙で珍しいデザインの選択です。 最初からこれをレイアウトするための優れたドキュメントが不足していたためにデバッグを失った時間に拍車がかかったと感じたため、今ではほとんど使用をやめています。

AxiosとPHPを使用した投稿は、真の悪夢です。

結果が出ずに2時間過ごしました...

フォームにエンコードされていない投稿は、PHPの$ _POSTに入力されません。 投稿の本文を読む必要があります。

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

jsonを期待する場合：

$json=json_decode($body);

このコード：

axios = require('axios');

var param = {
   args: {
      myStringVal: '979251e4-6c9f-460d-ba32-1b6fe58ce8a3'
   }
};

axios({
   method: 'post',
   url: 'http://home.test/post.php',
   data: param,
});

サーバーでこれに対して：

<?php

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

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

この出力を生成しました：

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

)

私はそのような問題を修正しました：

フロント

✋userSearchParams（）はどこでも機能するわけではありません（ https://caniuse.com/#search = URLSearchParams（））

        let params = new URLSearchParams();
        params.append('email', this.email );
        params.append('url', userInfo.url );
        this.$http.post(
          'http://localhost:9999/api/record.php', params
          )
        .then((response) => {
          if (response.data.message === "success" )  this.$router.push( 'thankyou' );
        })
        .catch( (error) =>   console.log(error) ) ;

戻る

print_r( $_POST ); 

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

qsをインストールして動作させました。

          import qs from "qs";


        const params = {
            name: "User",
            startTime: "2:00PM",
            endTime: "3:00PM",
            status: "pending",
            invitation: "test",
        };

        axios.post("DOMAIN/event/new", qs.stringify(params))
            .then((response) => {
                console.log(response);
            })
            .catch((error) => {
                console.log(error);
            });

@Legymありがとう！ 私はqs.stringifyでも動作するようになりました！ くそーPOSTリクエストを正しく機能させることができなかったので、axiosの使用をやめようとしていました。

どうもありがとう！

私は実際に、外部ライブラリを必要とせずに、より良い解決策を見つけました。 Postリクエストヘッダーがformに設定されています。 JSONオブジェクトを送信する場合は、ヘッダーを変更する必要があります

        const params = {
            name: "User",
            startTime: "2:00PM",
            endTime: "3:00PM",
            status: "pending",
            invitation: "test",
        };

axios.post('DOMAIN/event/new', params, {
     headers: {
          'content-type': 'application/json',
     },
})

@Legymありがとうございました！

POSTが機能しない理由がよくわかりません。 Legymのヘッダーは私のためにそれを修正しません。
jqueryが最初に機能したので、何が起こっているのかわかりません。

URLSearchParamsアプローチは、macOSのSafariでは機能しません。

誰かがaxiosを介してファイルとデータをPOSTすることができましたか？
PHPのLaravelフレームワークを使用しています。

@latanoil正直なところ、axiosを使用することの利点はほとんどありません。 よりシンプルで、よりサポートされ、より文書化されたAjaxライブラリに固執するのが最善です。 Jqueryは試され、テストされ、完全に機能します。ここで問題が発生することはありません。

アドバイスをありがとう@dlgoodchild 。 私はこれに数日間苦労しました。 jQueryに固執します。

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

このように作業するには、_data_ではなく_params_を使用します

笑これがうまくいくのがとても大変だったなんて信じられません。

_this_ basic、_this_ ... _common_は、難しいことではありません。

@HellsingMattいいえ、私にはうまくいきませんでした。 $ _GETと混同されている可能性があります。 'params'は、GETで機能させるために使用したものだからです。 しかし、POSTではうまくいきませんでした。

@mallochine興味深い、私はnode.jsのPOSTで_params_を使用します

@HellsingMattわかりました。 私はPHPを使用しています。 axiosがPHPで完全にクラップスしているように見えます。 PHPバックエンドを使用していますか？

@mallochineはまだPHPを学習していません、すべてのバックエンドはnode.jsを使用しています

私はPHPを使用しています。 問題ありません。
場合によっては（通常は）jsonが必要なので、それに応じてヘッダーを設定します。 $ _POSTを設定したい場合は、qsのようなライブラリ、または独自のより単純な実装（すべてのケースを処理できるわけではありませんが、私には十分です）を使用してクエリ文字列に変換します。

そのような関数の例については、このSO投稿を参照してください： https ：//stackoverflow.com/a/1714899/6728516

このAxiosの癖は、メインのドキュメントで長い間取り上げられてきましたが、確かにもう少し説明的かもしれません。

私は一般的に、JSONを使用する方がはるかに用途が広いので、これを行うことはめったにありません。 PHPで投稿されたJSONを取得する方法については、上記の私のコメントを参照してください。

血まみれの地獄。

フォームの標準API機能を壊したくなかったので、フォールバックを追加する必要がありました。

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

幸いなことに、私はphp側にアクセスできました。それが外部APIである場合、私は§§§になります。 vueのすべてのajaxクライアントを一覧表示するときにこれについて警告があるはずです:)

「params」を使用して動作し、これでPHPを使用します。
これはnativescript-vue2.0.0内のaxiosであることに注意してください。

@HellsingMattありがとうございます！

qsをインストールして動作させました。

          import qs from "qs";


        const params = {
            name: "User",
            startTime: "2:00PM",
            endTime: "3:00PM",
            status: "pending",
            invitation: "test",
        };

        axios.post("DOMAIN/event/new", qs.stringify(params))
            .then((response) => {
                console.log(response);
            })
            .catch((error) => {
                console.log(error);
            });

P

すべてのcorsヘッダーとコンテンツタイプを含むphpバックエンドコードを投稿してください。 私は両方のaxiosを試しましたが、両方のフェッチが機能していません。

ドキュメントの間違いのようですが、データなしでparamsオブジェクトを使用する必要があり、機能しています。 私はそれを理解するために2時間を費やしました（（

 axios（{
 メソッド： 'post'、
 url： 'url'、
 パラメータ：{
 キー：値
 }
 }）

たくさんのダニイルに感謝します。 私はあなたの助けに感謝します。 教えてくれてありがとう
エラー。

2018年11月10日土曜日午前11時18分[email protected]は次のように書いています。

ドキュメントの間違いのようですが、paramsオブジェクトを使用する必要があります。
データとそれは機能しています。 私はそれを理解するために2時間を費やしました（（

axios（{
メソッド： 'post'、
url： '/ wp-admin / admin-ajax.php？action = data_fetch'、
パラメータ：{
キー：値
}
}）

—
コメントしたのでこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/axios/axios/issues/1195#issuecomment-437612819 、またはミュート
スレッド
https://github.com/notifications/unsubscribe-auth/ApIWeUP45k17b70vsaT80KR1g_cxXcMvks5utyZzgaJpZM4Ql8j5
。

私はそのような問題を修正しました：

フロント

✋userSearchParams（）はどこでも機能するわけではありません（ https://caniuse.com/#search = URLSearchParams（））

        let params = new URLSearchParams();
        params.append('email', this.email );
        params.append('url', userInfo.url );
        this.$http.post(
          'http://localhost:9999/api/record.php', params
          )
        .then((response) => {
          if (response.data.message === "success" )  this.$router.push( 'thankyou' );
        })
        .catch( (error) =>   console.log(error) ) ;

戻る

print_r( $_POST ); 

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

とても助かります、ありがとう！

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

このように作業するには、_data_ではなく_params_を使用します

私にも感謝します、はるかにクリーンなアプローチ。

ベースURLですでに作成されているAxiosインスタンスがあります。

そのインスタンスを使用して投稿したいと思います。 正しい設定は何ですか？

これは機能します：

    axios({
        method: "post",
        url: "https://slack.com/api/chat.postMessage",
        params: {
            token: this.token,
            channel: this.channel,
            text: "Testing API"
        },
        transformRequest: [
            (data, headers) => {
                console.log("data-in-transform", data);
                delete headers.post["Content-Type"];
                return data;
            }
        ]
    });

これは動作しません：

    ax = axios.create({
        baseURL: `https://slack.com/api/`,
        params: {
            token: this.token,
            channel: this.channel
        },
        withCredentials: false,
        transformRequest: [
            (data, headers) => {
                delete headers.post["Content-Type"];
                return data;
            }
        ]
    });
        this.ax.post("chat.postMessage", {
            withCredentials: false,
            params: {
                text: "Testing API"
            },
            transformRequest: [
                (data, headers) => {
                    console.log("data-in-transform", data);
                    delete headers.post["Content-Type"];
                    return data;
                }
            ]
        });

私はこの問題を解決するために15日を費やしました:(ここにコードがあります

 Axios({

        method: apiMethod,
        url: root_url, // Api URL
        data: (apiMethod === 'POST')? Qs.stringify(apiParams) : undefined, // API post parameters,
        params:(apiMethod === 'get')? apiParams : undefined, //API get params
        headers:{
          'Accept': 'application/json',
          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
        },

    }).then(function (response) { // On Success
        console.log('Response', response.data );

        successCallback(response.status, response.data);
    })
    .catch(function (error) { // On Failure
        console.log('error', error);

        errorCallback(error.status, error.data);
    })
    .then(function () { // Always
        alwaysCallback(false);
    });

それは単に恐ろしいことです。 POSTリクエストを送信するだけのこのような長い議論であり、最終的にはまだ具体的な解決策がありません。

私は同じ問題に直面していて、すでに3日間過ごしました。 可能なすべての組み合わせとオプションを試しましたが、それでも同じ状況に陥っています。 したがって、私のバックエンドもPHPで記述されており、 axiosにはPOSTとPHPの組み合わせに大きな問題があると感じていますが、これは単に受け入れられません!!

jQueryはこれらのことを非常にうまく処理するので、もう一度切り替えます。 POSTリクエストを送信するためだけに追加の依存関係をインストールしたくありません！

また、適切な解決策なしでスレッドが閉じられます!!

@ awais-ilyasによって閉鎖されました。可能であれば、彼は理想的には再開する必要があります。

うん！ しかし、スレッドは私をどこにも連れて行かない。 JSONオブジェクトを使用してPHPにPOSTリクエストを送信することは、依然として苦痛です。 @dlgoodchild私はこのスレッドに遅れて来たので、まだ回避策はありますか？

ええ@emfluenceindiaこのスレッドには、JSONを使用する必要のない回避策がたくさんあります。

私はそれらを見ました。 これは、JSONとしてPOSTすることがまだできないことを意味しますか？

このスレッドは、実際にはJSONの投稿に関するものではありません。 JSONを投稿本文として投稿することは問題ではありません。このスレッドは、jQueryのようにdata：属性を使用し、PHPで$ _POSTにデータを入力することを目的としています。

私は最近、AJAX作業にjQueryを使用することからAxiosに移行し始めました。それは、それが大流行しているように思われるからです。 しかし、単純なPOSTができないことを知ってショックを受けました。

だから、これが私が最初に試したものです：

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

バックエンド（PHPを使用）では、$ _ POSTは完全に空でした。 だから私はグーグルをしました、そしてこれはうまくいきます（ポリフィルを使って、ため息をつきます）：

const params = new URLSearchParams();
params.append('event_id', eventId);
params.append('item_id', itemId);
params.append('description', description);
axios({
  method: 'post',
  url: '/api/event/item',
  data: params
});

これは機能します。 だから私はURLSearchParamsを使う必要がありますか？ ドキュメントには最初の方法が機能するはずであることが示されているため、これはイライラしました。

他にこの問題を抱えている人はいますか？

私は今日この問題に遭遇しました、そして私はこれにほぼ一日を費やしました。 s weird because the document of axios told me to use first method which didn機能します。 ありがとう、兄弟

君たちは入れましたか
app.use（express.json（））
app.jsで？

これで十分です：

const formData = new FormData();
formData.append('action', 'some-action');
formData.append('page', 1);

axios
  .post('/async/index.php', formData, {
    retry: 3,
    retryDelay: 100,
  })
  .then(res => {
    console.log('get', res.data);
  })
  .catch(console.log);

PHP

print_r($_POST);

答えは、以下を追加することです。 Axiosは、デフォルトでurl-form-encodedを使用します。

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

これらのソリューションはどれも私にはうまくいきませんでした。これは、node.jsユーザーの場合、構成オブジェクトが渡された_3番目の引数であるためにポストリクエスト用のデータオブジェクトが必要であるため、READMEが誤解を招くためだと思います。 .post関数にはこのインターフェイスがあります

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

したがって、このように.post関数を呼び出す必要があります

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

@NathanielRNこのソリューションは機能しますが、最適ではありません。 すべてのパラメータをURLに追加します。 「get」に似ています。

@NathanielRNこのソリューションは機能しますが、最適ではありません。 すべてのパラメータをURLに追加します。 「get」に似ています。

@nicolardi申し訳ありませんが、URLリクエストのパフォーマンスについてはあまり詳しくありません。 URLにパラメータを追加するのは最適ではありませんか？ 「ゲット」みたいなのに？

Axiosは周りで最も有名なクライアントですが、そのような欠陥があります。 がっかり。

調査のために再開

問題はAxiosではありません。 同じパラメーター（メソッド：Post、Body：{"something"： "value"}、ヘッダーをjsonに設定）でcURLまたはPostmanを使用すると、機能します。 ただし、Vue、React、Angular（その他）でAxiosまたはFetch APIを使用して実行すると、Chromeまたは（他のブラウザー）リクエストメソッド（[ネットワーク]タブを参照）がオプションに「変更」され、もうPOSTします。 その背後にある理由は... CORS（クロスオリジンリソースシェアリング）です。 NestJSを使用してAPIを作成していて、CORSを有効にするのを忘れたために見つかりました。 有効にすると、リクエストメソッドはPOSTとして保持され（必要に応じて）、AxiosはJSON（またはその他の形式）を返すことができます。 一部のフレームワークはCORSを自動的に設定し（Laravelなど）、他のフレームワークは手動で設定/有効化する必要があります。

これで十分です：

const formData = new FormData();
formData.append('action', 'some-action');
formData.append('page', 1);

axios
  .post('/async/index.php', formData, {
    retry: 3,
    retryDelay: 100,
  })
  .then(res => {
    console.log('get', res.data);
  })
  .catch(console.log);

PHP

print_r($_POST);

@jonataswalkerによるソリューションは、Axiosを使用してPOSTを処理するための最良のアプローチです。 FormData（）の使用は私のために働いた。

だから私は同じような問題を抱えています。 私はフロントにVue.jsを使用していますが、最後のバージョン（axios、およびvue）に更新したため、データを送信できないことがわかりました。 私の最後のプロジェクトでは、任意の形式でデータを送信できました。

古いバージョンでは正常に動作し、更新されたバージョンではまったく動作しません。

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

投稿が機能しない場合は、古いバージョンのaxiosと使用しているフレームワークを使用してみてください。

私はdjangoバックエンドでこの問題に遭遇しました。 幸い、GETを使用した回避策がありますが、axios.postは文書化されているとおりに機能しません。

これは、axiosの問題ではなく、corsの問題である可能性があります。
ノードサーバーからphpバックエンドに投稿する場合は、phpスクリプトにcorsが必要です。

https://stackoverflow.com/a/55392661

また、$ _ POSTではなく$ data = file_get_contents（ 'php：// input'）;を使用します。

これは、PHPで$ _POST値を取得するために機能しているようです。

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

@alvarotrigoと@latanoelのアイデアを組み合わせて、このようにdjangoバックエンド（corsがインストールおよび構成されている）でこれを機能させることができました。

const formData = new FormData();
formData.append('a1', this.form.a1);
formData.append('a2', this.form.a2);
formData.append('a3', this.form.a3);

axios
  .post(url, formData, {
    headers: {
      'Content-type': 'application/x-www-form-urlencoded',
    }
  })
etc

ドキュメントが示唆するようにPOST引数をインラインで含めると、POSTはバックエンドで空になります。 また、corsに違反するため、Access-Control-Allow-Originを設定することはできません。

また、この方法でもカムします
const paramsCompose = (formData) => { const str = []; for (let p in formData) { str.push(encodeURIComponent(p) + '=' + encodeURIComponent(formData[p])); } const body = str.join('&'); console.log('PARAMS ' + body); return body; };

次にあなた ...
return axios.post(url, paramsCompose({ image_url: image_url, cover_name: cover_name })) .then(res => { const tx = res.data; console.log(tx); return res.data });

数日後、以前のすべてのオプションを試しました...私はまだ問題を解決することに成功していません。

実際、私たちが持っているのは次のとおりです。

• Axiosの「post」メソッドは文書化されているようには機能しません。
• Axiosを使用して、RESTサービスへの単純な「post」呼び出しを実行します。

深刻だとは信じられません...申し訳ありませんが、別のAPIを使用するために戻ってきます。 さようならアクシオス。

@fabriciobraga私は、なぜこれが私のアプリケーションでも起こっているのかを理解しようとしていました。 私は一日中、解決策を求めてインターネットを精査しました。 しかし、それは非常に単純な問題であることがわかりました。 私のユーザーが作成しactionは、最初は次のようになりました。

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

userパラメータには、新しいユーザーのemailとpasswordを含むオブジェクトがあります。 ユーザーオブジェクトをconsole.logしようとしましたが、プロパティが未定義であると報告されました。 🤔

そのため、 $ postメソッドに渡すときにユーザーオブジェクトを拡散すると、機能するようになりました。

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

私の場合、ユーザーオブジェクトは空のオブジェクトとして送信されていましたが、APIはそのように報告しました。 同じ問題に直面している場合は、これを試してみてください。

もう1つの考えられるシナリオは、データが正常に送信されているが、APIが期待する形式ではないことです（たとえば、PHPスクリプトの一般的な形式はform-dataですが、ほとんどのNode.js APIはJSONを期待しています）。 したがって、これを理解する必要があります。 上記の説明を参照してください。

どうやら同じ問題を抱えている
axios.post("api", { API: 1, version: "0.1b"...})....
JavaRESTサーバーに到達したときのAPIとバージョンが空の場合の結果。
3番目のパラメータとして送信する場合、つまり
axios.post("api", null, { params: {API: 1, version: "0.1b"...}})....
期待どおりに動作します

これは、最もコメントされ、開かれている問題の1つです。 私はこのスレッドのすべてのコメントを読んだと信じています。 多くのユーザーは、axiosによるデータの投稿方法に混乱しました。 誰かがヒットや結論を出し、新しいユーザーは再び指示を逃しました。

axiosは単なるリクエストクライアントであることを忘れないでください。 期待される応答が表示されなかった場合は、axiosが送信するものがサーバーの期待と一致するかどうかを確認してください。 ポストまたはすべてのアクシオスの問題を解決するための私の主な手順は次のとおりです。 また、ユーザーが次の質問に答えて問題を開くことができることを願っています。 後で問題テンプレートを更新するかもしれません。

1. コードを実行したのはどちら側ですか？ ブラウザまたはサーバー側。
2. どのパラメータを送信しますか？ config.paramsまたはconfig.dataを使用する必要がありますか？
3. paramsの場合、それらをエンコードする方法は？ デフォルトのconfig.paramsSerializerで十分ですか、それともカスタマイズして使用する必要がありますか？
4. dataの場合、正しいcontent-typeヘッダーでエンコードしましたか？ ほとんどの投稿の問題はここで失敗しました。
   
   
   
   1. ヘッダーapplication/jsonにはJSON.stringify $が必要であり、ヘッダーapplication/x-www-form-urlencodedにはqs.stringify $が必要です。
   
   
   2. デフォルトのconfig.transformRequestは、URLSearchParamsにapplication/x-www-form-urlencodedを設定し、Javascriptオブジェクトにapplication/jsonを設定します。 正確に理解するには、 lib/defaults.jsのソースコードを確認してください。
   
   
5. 他の問題、つまりCORS / ATS / Promisesに遭遇し、それらを解決する方法を知っていましたか？

私はそれらが複雑に見えることを知っています、そして私は可能な限り詳細に説明するチュートリアルを書くことを計画しています。 しかし、私はネイティブスピーカーではなく、記事のレベルについて少し心配しています。 それをロックすることを許してください、そして私またはコミュニティの誰かがよく書かれた文書を与えるのを待ってください。 これはオープンソースです。 みんなの貢献が必要です。