Axios: POST अनुरोध ब्राउज़र में काम करता है लेकिन नोड पर नहीं

इसे #789 का डुप्लिकेट माना जा सकता है।

मैं नोडज में एक्सियोस के साथ form-data पैकेज का उपयोग करने में सक्षम था। यह मूल रूप से FormData जैसा इंटरफ़ेस प्रदान करता है। हालाँकि, आपको एक्सियोस को मैन्युअल रूप से उत्पन्न होने वाले हेडर को पास करने के लिए सावधान रहना होगा। उदाहरण के लिए:

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 को बदल दिया है।

क्या कोई कृपया दिखा सकता है कि नोडज ऐप में क्या किया जाना है ??

@ ar412 मैंने https://github.com/mzabriskie/axios/issues/1006#issuecomment -320165427 पर एक उदाहरण देने की कोशिश की, क्या आप स्पष्ट कर सकते हैं कि आप क्या पूछ रहे हैं?

@binki अगर कुछ डेटा के साथ एक रेस्टापी पर एक पोस्ट अनुरोध भेजने के लिए axios का उपयोग किया जा रहा है, तो उस डेटा को बाकी एपीआई (जो एक एक्सप्रेस एप्लिकेशन के अंदर है) में कैसे पुनः प्राप्त करें।

आप यह कोशिश कर सकते हैं https://expressjs.com/en/4x/api.html#req @ar412

@ ar412 एक्सप्रेस में मल्टीपार्ट डेटा प्राप्त करने के लिए, आप busboy जैसी किसी चीज़ का उपयोग कर सकते हैं जैसा कि body-parser के डॉक्स द्वारा अनुशंसित है । मूल रूप से, एक्सप्रेस में अपलोड की गई फ़ाइलों को कैसे संभालना है, यह सीखने के लिए, यह एक्सियोस से बिल्कुल भी संबंधित नहीं है, इसलिए आप कहीं और पूछना बेहतर समझते हैं क्योंकि आपने इस धागे को अपहृत कर लिया है ;-)। उदाहरण के लिए, यह उत्तर SO पर देखें।

त्रुटि संदेश मिला: form.getHeaders() एक फ़ंक्शन नहीं है

@binki
अरे! मेरे पास एक hapi.js सर्वर है जिसमें मैं fs.readFile (पथ) का उपयोग करके एक चर में संग्रहीत एक छवि फ़ाइल पोस्ट करना चाहता हूं।
मैं इसे फॉर्मडाटा() के रूप में भेजने में सक्षम नहीं हूं

यह मेरा कोड है:

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

फिर मैं अनुरोध के मुख्य भाग के रूप में फॉर्म भेजता हूं और मैंने विकल्प ['सामग्री-प्रकार'] = 'मल्टीपार्ट/फॉर्म-डेटा' सेट किया है

क्या आप मदद कर सकते हैं?
बहुत सराहना की!

@bstolarz यदि आप Buffer , जो आप कर रहे हैं, तो आपको knownLength पास करने की आवश्यकता नहीं है। साथ ही, यदि आपने जो लिखा है उसे पढ़ते हैं ( form-data के README के ​​उदाहरणों से गलती से कॉपी और पेस्ट किया गया है), तो आपको केवल filename या filepath एक की आपूर्ति करनी चाहिए - दोनों नहीं। केवल वही चीजें जो आपके लिए सेट करने के लिए समझ में आ सकती हैं:

1. filename या filepath
2. contentType (यदि सर्वर को किसी विशेष सामग्री-प्रकार मान की आवश्यकता होती है, अन्यथा शायद छोड़ा जा सकता है)।

क्या मैं शर्त हो रहा है छवि आप भेज रहे हैं के आकार एक आकार है कि नहीं दे रहा है वह यह है कि 19806 क्योंकि कि 19806 मूल्य कुछ है आप में एक उदाहरण से नकल form-data अपने स्वयं के डेटा के लिए गणना करने के बजाय form-data को स्वयं एक त्रुटि फेंकने या HTTP अनुरोध में अमान्य डेटा लिखने का कारण हो सकता है। क्या आपने जांचा कि क्या axios.post() की वापसी Promise अस्वीकार कर रही है या यदि कोई अपवाद फेंका गया है? यदि अक्षीय अनुरोध अस्वीकार कर दिया जाता है, तो जांच लें कि त्रुटि ऑब्जेक्ट में 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 फेंकता है "लंबाई आवश्यक है" (मैंने fs.createReadStream भी कोशिश की जो फॉर्मडाटा द्वारा पूरी तरह से समर्थित है, लेकिन मुझे वही लंबाई त्रुटि मिलती है)।

@binki
मैं हेडर सामग्री-लंबाई को सबसे निचली परत में सेट करने में कामयाब रहा और मुझे अब वह त्रुटि नहीं मिलती है।
अब जब मुझे सर्वर से 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://gist.github.com/binki/10ac3e91851b524546f8279733cdadad । शायद आप मेरे उदाहरण से मेल खाने के लिए axios.post() या axios() को कॉल करने के तरीके को संशोधित कर सकते हैं और यह आपके लिए काम करेगा?

यदि आपको अभी भी कोई समस्या है, तो कृपया अपने कोड को उसकी अपनी स्क्रिप्ट पर ले जाने और उसे वहां पुन: प्रस्तुत करने का प्रयास करें। यह समस्या को हल करने में आपकी मदद कर सकता है। यदि आप अभी भी अटके हुए हैं, तो कृपया एक सार के रूप में axios() या axios.post() पर कॉल सहित पूर्ण कोड पोस्ट करें और इसे यहां लिंक करें और, यदि मैं कर सकता हूं, तो मैं इस पर गौर करूंगा।

यह अभी भी बिल्कुल काम नहीं करता है ...

@rodrigogs यदि आप सहायता चाहते हैं, तो आपको अधिक विस्तृत होने की आवश्यकता होगी ;-)।

मैंने एक्सियोस पर इस सहायक शोध का अनुसरण किया और अंतिम समाधान मेरे लिए काम करता है ( लिंक )

पेश है इसकी कॉपी/पेस्ट:

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 , मुझे भी वही त्रुटि मिलती है। @ बिंकी , कोई विचार?
त्रुटि
form.getHeaders एक फ़ंक्शन नहीं है

@smplyjr क्या आप अधिक संदर्भ दे सकते हैं और मुझे form कैसे मिलता है? कोड के बिना, हम यह नहीं बता सकते कि आप क्या कर रहे हैं या आपकी सहायता कर रहे हैं।

नोडज के लिए उपयोगकर्ता निम्नानुसार क्वेरीस्ट्रिंग लिब का उपयोग करके हल करते हैं:

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

जैसा कि @ हेल्ड्रिडा ने उल्लेख किया है, https://www.npmjs.com/package/axios#nodejs। form-data पैकेज में यहां सभी प्रकार की समस्याएं हैं और आप इसे काम करने की कोशिश में अपने बालों को खींचकर समाप्त कर देंगे।

@heldrida @ ashok-sc अक्ष के साथ फ़ाइल अपलोड करने के लिए मुझे querystring या qs का उपयोग कैसे करना चाहिए? मैं एक एडब्ल्यूएस लैम्ब्डा से फ़ाइलें अपलोड करने के लिए axios का उपयोग कर रहा हूँ और मैं स्पष्ट रूप से वहाँ से फ़ाइल वस्तु तक पहुँच नहीं है

@bstolarz मैंने आपकी समस्या को पुन: पेश करने की पूरी कोशिश की है। हालाँकि, मैं नहीं कर सकता। आप जो कर रहे हैं उसकी नकल करने की कोशिश करने के लिए मैंने यह कोड लिखा है। हालांकि, मैंने जानबूझकर Content-Length मैन्युअल रूप से सेट करना छोड़ दिया। मुझे विश्वास है कि यह तथ्य कि आप Content-Length सेट कर रहे हैं, आपकी समस्या से संबंधित हो सकता है। कृपया form-data इसकी गणना करने की अनुमति देने का प्रयास करें—इसीलिए आपको form.getHeaders() कॉल करना चाहिए।

यह पेस्ट देखें: https://gist.github.com/binki/10ac3e91851b524546f8279733cdadad । शायद आप मेरे उदाहरण से मेल खाने के लिए axios.post() या axios() को कॉल करने के तरीके को संशोधित कर सकते हैं और यह आपके लिए काम करेगा?

यदि आपको अभी भी कोई समस्या है, तो कृपया अपने कोड को उसकी अपनी स्क्रिप्ट पर ले जाने और उसे वहां पुन: प्रस्तुत करने का प्रयास करें। यह समस्या को हल करने में आपकी मदद कर सकता है। यदि आप अभी भी अटके हुए हैं, तो कृपया एक सार के रूप में axios() या axios.post() पर कॉल सहित पूर्ण कोड पोस्ट करें और इसे यहां लिंक करें और, यदि मैं कर सकता हूं, तो मैं इस पर गौर करूंगा।

धन्यवाद दोस्त। सामग्री-लंबाई जोड़ने से मेरी समस्या हल हो गई है अब मैं फॉर्मडाटा के साथ अक्षीय बैकएंड-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 का डुप्लिकेट माना जा सकता है।

मैं नोडज में एक्सियोस के साथ form-data पैकेज का उपयोग करने में सक्षम था। यह मूल रूप से FormData जैसा इंटरफ़ेस प्रदान करता है। हालाँकि, आपको एक्सियोस को मैन्युअल रूप से उत्पन्न होने वाले हेडर को पास करने के लिए सावधान रहना होगा। उदाहरण के लिए:

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

इस पोस्ट के सभी योगदानकर्ताओं को धन्यवाद। एक्सियोस का उपयोग करके मेरे form-data फॉर्म को पोस्ट करने में घंटों खर्च करने के बाद, एक बैकएंड पर जो इसे अमेज़ॅन बाल्टी में पोस्ट करता है, समाधान मैन्युअल रूप से 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
});

एक्सियोस का उपयोग करके मेरे form-data फॉर्म को पोस्ट करने में घंटों खर्च करने के बाद, एक बैकएंड पर जो इसे अमेज़ॅन बाल्टी में पोस्ट करता है, समाधान मैन्युअल रूप से content-length सेट करने के लिए निकला ....

हां। मैंने और मेरे एक सहयोगी ने बैकएंड पर फ़ाइलों को पोस्ट करने का प्रयास करते समय कई घंटे बिताए, जो उत्तर देगा कि कोई डेटा सबमिट नहीं किया जा रहा था, जबकि यह स्पष्ट रूप से था, क्योंकि हम अनुरोध का पता लगा सकते थे और सामग्री देख सकते थे। समस्या अनुपलब्ध सामग्री-लंबाई शीर्षलेख थी।

एक नोट के रूप में, यदि आप फॉर्मडाटा में बफर जोड़ रहे हैं, तो यह ठीक है यदि आप formData.getLengthSync() पर कॉल करते हैं लेकिन यदि आप स्ट्रीम से निपट रहे हैं, तो आपको पहले फ़ाइल को fs.statSync(filePath).size साथ स्टेट करना होगा या पूर्ण आकार किसी अन्य तरीके से प्राप्त करें (जैसे अपस्ट्रीम से सामग्री-लंबाई शीर्षलेख से), उदाहरण के लिए यदि स्ट्रीम अनुरोध या सॉकेट या जो कुछ भी आता है। यदि आपकी स्ट्रीम इसके बजाय डिस्क से आती है, तो fs.statSync(filePath).size बाइट्स में आकार देगा, ताकि आप इसे फॉर्मडाटा में जोड़ते समय ज्ञात लम्बाई में जोड़ सकें:

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

बेशक सभी सिंक विधियों को async वाले और प्रतीक्षित कीवर्ड के लिए स्विच किया जा सकता है।

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

मुझे लगता है कि आप फॉर्मडाटा से पहले वास्तव में await भूल गए थे ...