Axios: POSTリクエストはブラウザでは機能しますが、ノードでは機能しません

これは＃789の複製と見なされる可能性があります。

nodejsのAxiosでform-dataパッケージを使用することができました。 基本的にFormDataようなインターフェースを提供します。 ただし、生成されたヘッダーを手動でAxiosに渡すように注意する必要があります。 例えば：

const axios = require('axios');
const FormData = require('form-data');

const form = new FormData();
// Second argument  can take Buffer or Stream (lazily read during the request) too.
// Third argument is filename if you want to simulate a file upload. Otherwise omit.
form.append('field', 'a,b,c', 'blah.csv');
axios.post('http://example.org/endpoint', form, {
  headers: form.getHeaders(),
}).then(result => {
  // Handle result…
  console.log(result.data);
});

ええ、私はそのform-dataパッケージで試しました。 さて、今は大丈夫です。代わりにJSONを解析するようにサーバー側APIを変更しました。

誰かがnodejsアプリで何をすべきかを教えてもらえますか？

@ ar412 https://github.com/mzabriskie/axios/issues/1006#issuecomment -320165427で例を挙げようとしましたが、何を求めているのか明確にできますか？

@binki axiosを使用してrestapiでいくつかのデータを含むPOSTリクエストを送信している場合、残りのapi（エクスプレスアプリケーション内にある）でそのデータを取得する方法。

これを試すことができますhttps://expressjs.com/en/4x/api.html#req@ ar412

@ ar412 Expressでマルチパートデータを受信するには、 body-parserのドキュメントで推奨されているように、 busboyようなものを使用できます。 基本的に、Expressでアップロードされたファイルを処理する方法を学ぶために、それはAxiosとはまったく関係がないので、このスレッドを乗っ取ったので他の場所に尋ねたほうがいいです;-)。 たとえば、 SOでこの回答を参照してください。

エラーメッセージが表示されました：form.getHeaders（）は関数ではありません

@binki
おい！ fs.readFile（path）を使用して変数に保存された画像ファイルをPOSTしたいhapi.jsサーバーがあります。
それをFormData（）として送信して動作させることができません

これは私のコードです：

fs.readFile(__dirname+'/../static/lisa_server.jpg', (error, imageData) => {
          var form = new FormData()

            form.append('file', imageData,  {
            filename: 'unicycle.jpg', // ... or:
            filepath: '/../static/lisa_server.jpg',
            contentType: 'image/jpg',
            knownLength: 19806
          })

次に、リクエストの本文としてフォームを送信し、options ['Content-Type'] = 'multipart / form-data'を設定します。

手伝ってもらえますか？
とても有難い！

@bstolarz実行しているBufferを渡す場合、 knownLengthを渡す必要はありません。 また、自分が書いたもの（ form-dataのREADMEの例からエラー、コピー、貼り付け）を読んだ場合は、 filenameまたはfilepathどちらか一方のみを指定する必要があります。両方は指定しないでください。 あなたが設定することが理にかなっているかもしれない唯一のものは次のとおりです：

1. filenameまたはfilepath
2. contentType （サーバーが特定のContent-Type値を必要とする場合、それ以外の場合はおそらく省略できます）。

私は賭け起こっていることは、あなたが送信している画像のサイズがない大きさを有していることである19806そのため、 19806値が何かであるあなたがの例からコピーform-data独自のデータ用に計算されるのではなく、form-data自体がエラーをスローしたり、HTTPリクエストに無効なデータを書き込んだりする可能性があります。 返されたaxios.post()がPromiseを拒否しているかどうか、または例外がスローされているかどうかを確認しましたか？ axios要求が拒否された場合は、エラーオブジェクトにresultキーがあるかどうかを確認し、ある場合は、 err.result.status値が何であるかを確認します。 404または403以外の4xx値の場合は、サーバーが不正な形式のリクエストを拒否していることを意味します。これは、既知のサイズが正しくないことが原因である可能性があります。

@binki
ねえ、あなたの応答に感謝します。 私はあなたが言ったことを修正したので、今私のコードは

fs.readFile(__dirname+'/../static/lisa_server.jpg', (error, imageData) => {
          var form = new FormData()

          form.append('file', imageData, {
               filepath: __dirname+'/../static/lisa_server.jpg',
               contentType: 'image/jpg'

          })

しかし、サーバーは411「長さが必要です」をスローします（FormDataで完全にサポートされているように見えるfs.createReadStreamも試しましたが、同じ長さのエラーが発生します）。

@binki
ヘッダーのcontent-lengthを最下層に設定できましたが、そのエラーは発生しなくなりました。
サーバーから411を取得しなかったので、かつて400「ファイルが提供されていません」というエラーに戻りました。

これはリクエストがどのように見えるかです

開始リクエスト

{ adapter: [Function: httpAdapter],
  transformRequest: { '0': [Function: transformRequest] },
  transformResponse: { '0': [Function: transformResponse] },
  timeout: 5000,
  xsrfCookieName: 'XSRF-TOKEN',
  xsrfHeaderName: 'X-XSRF-TOKEN',
  maxContentLength: -1,
  validateStatus: [Function: validateStatus],
  headers:
   { common: { Accept: 'application/json, text/plain, */*' },
     delete: {},
     get: {},
     head: {},
     post: { 'Content-Type': 'application/json' },
     put: { 'Content-Type': 'application/json' },
     patch: { 'Content-Type': 'application/json' },
     'User-Agent': 'trojan server 1.0',
     'X-Origin-Panamera': 'Staging',
     'Content-Length': 25247 },
  baseURL: 'https://letgoar-a.akamaihd.net/api/v1',
  method: 'post',
  url: 'https://<baseDomain>/api/v1/images',
  data:
   FormData {
     _overheadLength: 218,
     _valueLength: 25247,
     _valuesToMeasure: [],
     writable: false,
     readable: true,
     dataSize: 0,
     maxDataSize: 2097152,
     pauseStreams: true,
     _released: false,
     _streams:
      [ '----------------------------677738213014296377492349\r\nContent-Disposition: form-data; name="file"; filename="/Users/brenda/repos/qreator2/qreator/trojan-server/src/static/lisa_server.jpg"\r\nContent-Type: image/jpg\r\n\r\n',
        <Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 01 01 00 48 00 48 00 00 ff e2 11 2c 49 43 43 5f 50 52 4f 46 49 4c 45 00 01 01 00 00 11 1c 61 70 70 6c 02 00 00 00 ... >,
        [Function: bound ] ],
     _currentStream: null,
     _boundary: '--------------------------677738213014296377492349' },
  'Content-Type': 'multipart/form-data' }

これをチェックしてください。 あなたにとって、これは合理的な要求のように見えますか？

前もって感謝します

@bstolarz私はあなたの問題を再現するために最善を尽くしました。 しかし、私はできません。 私はあなたがしていることを模倣しようと試みるためにこのコードを書きました。 ただし、手動でContent-Length設定することは意図的に省略しました。 Content-Length設定しているという事実は、問題に関連している可能性があると確信しています。 form-dataに計算を任せてみてください。そのため、 form.getHeaders()呼び出す必要があります。

この貼り付けを参照してください： https ： axios.post()またはaxios()を呼び出す方法を変更することができ、それはあなたのために機能しますか？

それでも問題が解決しない場合は、コードを独自のスクリプトに移動して、そこで再現してみてください。 問題の解決に役立つ場合があります。 あなたはまだへの呼び出しを含めてください、ポストフルコード、立ち往生している場合はaxios()またはaxios.post()要旨などをし、私ができるならば、ここでそれをリンクし、私はそれになります。

それでもまったく機能しません...

@rodrigogsヘルプが必要な場合は、より詳細にする必要があります;-)。

私はAxiosに関するこの有益な調査に従い、最終的な解決策は私のために機能します（リンク）

これがそのコピー/貼り付けです：

import fs from 'fs';
import FormData from 'form-data';
import axios from 'axios';

let data = fs.createReadStream(__dirname + '/test.jpg');
let form = new FormData();

form.append('type','image');
form.append('media',data,'test.jpg');

function getHeaders(form) {
    return Promise((resolve, reject) => {
        form.getLength((err, length) => {
            if(err) { reject(err); }
            let headers = Object.assign({'Content-Length': length}, form.getHeaders());
            resolve(headers);
         });
    });
}

getHeaders(form)
.then((headers) => {
    return axios.post(url, form, {headers:headers})
})
.then((response)=>{
    console.log(response.data)
})
.catch(e=>{console.log(e)})

@westofpluto 、私も同じエラーが発生します。 @binki 、何か考えはありますか？
エラー
form.getHeadersは関数ではありません

@smplyjrコンテキストを増やして、 formを取得する方法を教えてください。 コードがなければ、私たちはあなたが何をしているのかを教えたり、あなたを助けたりすることはできません。

nodejsユーザーの場合、次のようにクエリ文字列libを使用して解決します。

const querystring = require('querystring')
axios
  .post(URL, querystring.stringify(data))
  .then((response) => ...)
  .catch((error) => ...)

@heldridaが述べたように、 https ： form-dataパッケージには、ここであらゆる種類の問題があり、それを機能させるために髪を引っ張ってしまうだけです。

@heldrida @ ashok-sc axiosでファイルをアップロードするには、 querystringまたはqsを使用する必要がありますか？ AWS Lambdaからファイルをアップロードするためにaxiosを使用していますが、そこからFileオブジェクトにアクセスできないことは明らかです。

@bstolarz私はあなたの問題を再現するために最善を尽くしました。 しかし、私はできません。 私はあなたがしていることを模倣しようと試みるためにこのコードを書きました。 ただし、手動でContent-Length設定することは意図的に省略しました。 Content-Length設定しているという事実は、問題に関連している可能性があると確信しています。 form-dataに計算を任せてみてください。そのため、 form.getHeaders()呼び出す必要があります。

この貼り付けを参照してください： https ： axios.post()またはaxios()を呼び出す方法を変更することができ、それはあなたのために機能しますか？

それでも問題が解決しない場合は、コードを独自のスクリプトに移動して、そこで再現してみてください。 問題の解決に役立つ場合があります。 あなたはまだへの呼び出しを含めてください、ポストフルコード、立ち往生している場合はaxios()またはaxios.post()要旨などをし、私ができるならば、ここでそれをリンクし、私はそれになります。

ありがとう。 Content-Lengthを追加すると、問題が解決し、FormDataでaxiosバックエンド2バックエンド呼び出しを使用できるようになりました。
const options = { method: 'POST', url: myUrl, data: justJsonBody, transformRequest: [function (data, headers) { const formData = convertToFormData(data); // returrns ForrmData from form-data headers['Content-Type'] = formData.getHeaders()['content-type']; headers['Content-Length'] = formData._overheadLength; return formData; }] };

これは＃789の複製と見なされる可能性があります。

nodejsのAxiosでform-dataパッケージを使用することができました。 基本的にFormDataようなインターフェースを提供します。 ただし、生成されたヘッダーを手動でAxiosに渡すように注意する必要があります。 例えば：

const axios = require('axios');
const FormData = require('form-data');

const form = new FormData();
// Second argument  can take Buffer or Stream (lazily read during the request) too.
// Third argument is filename if you want to simulate a file upload. Otherwise omit.
form.append('field', 'a,b,c', 'blah.csv');
axios.post('http://example.org/endpoint', form, {
  headers: form.getHeaders(),
}).then(result => {
  // Handle result…
  console.log(result.data);
});

ここで別の方法。 このようにして、プロキシエージェントをおよびその他の構成に追加できます。

const axios = require('axios');
const FormData = require('form-data');
const ProxyAgent = require('proxy-agent');

const form = new FormData();
// Second argument  can take Buffer or Stream (lazily read during the request) too.
// Third argument is filename if you want to simulate a file upload. Otherwise omit.
form.append('field', 'a,b,c', 'blah.csv');
axios({
  method: 'POST',
  url: 'http://example.org/endpoint',
  data: form,
  agent: new ProxyAgent("https://username:[email protected]:8080"),
  headers: bodyFormData.getHeaders()
}).then(result => {
  // Handle result…
  console.log(result.data);
});

これは私にとってはうまくいきます。

// ES6
import axios from 'axios';
import FormData from 'form-data';
import fs from 'fs';

FormData.prototype.getHeadersWithContentLength = function getHeadersWithContentLength() {
  return new Promise((resolve, reject) => {
    this.getLength((err, length) =>
      err ? reject(err) : resolve({ ...this.getHeaders(), 'Content-Length': length })
    )
  })
}

const payload = new FormData();
const form = new formidable.IncomingForm();

form.parse(req, (err, fields, { file }) => {
  if (err) return;

  payload.append("file", fs.createReadStream(file.path), {
    filename: file.name,
    contentType: file.type
  });

  payload.getHeadersWithContentLength().then(headers => {
    api
      .post(endpoint, payload, { headers })
      .then(({ data }) => data)
      .then(data => res.json({ data }));
  });
});

この投稿のすべての貢献者に感謝します。 Axiosを使用してform-dataフォームをAmazonバケットに投稿するバックエンドにPOSTする際に問題が発生した後、ソリューションは手動でcontent-length設定することになりました...。

私のコードが問題を抱えている他の人にとっては、これを機能させるのに問題がある次の行を助けることができるかもしれません:)

const axios = require('axios');
const FormData = require('form-data');

// Where buffer is a file
formData.append('file', buffer);

// Added a promise version like seen in earlier comments to get this
const contentLength = await formData.getLength();

await axios(`<ENDPOINT>`, {
    method: 'POST',
    baseURL: <BASE_URL>,
    params: {
        fileName: '<FILE_NAME>.png'
    },
    headers: {
        authorization: `Bearer <TOKEN>`,
        ...formData.getHeaders(),
        'content-length': contentLength
    },
    data: formData
});

Axiosを使用してform-dataフォームをAmazonバケットに投稿するバックエンドにPOSTする際に問題が発生した後、ソリューションは手動でcontent-length設定することになりました...。

はい。 私と私の同僚も、データが送信されていないことをバックエンドにPOSTしようとしたときに数時間を費やしましたが、リクエストを追跡してコンテンツを確認できたため、データが送信されていないことは明らかでした。 問題は、content-lengthヘッダーが欠落していることでした。

注意として、FormDataにバッファを追加する場合は、 formData.getLengthSync()を呼び出しても問題ありませんが、ストリームを処理する場合は、最初にfs.statSync(filePath).sizeファイルを統計する必要があります。または、別の方法でフルサイズを取得します（アップストリームのcontent-lengthヘッダーなど）。たとえば、ストリームがリクエストやソケットなどからのものである場合などです。 代わりにストリームがディスクからのものである場合、 fs.statSync(filePath).sizeはサイズをバイト単位で提供するため、FormDataに追加するときにknownLengthで追加できます。

formData.append("file", fs.createReadStream(filePath), { filename: 'whatever.pdf', knownLength: fs.statSync(filePath).size });

もちろん、すべてのSyncメソッドをasyncメソッドとawaitキーワードに切り替えることができます。

// Added a promise version like seen in earlier comments to get this
const contentLength = formData.getLength();

formDataの前にawaitを忘れたと思います...