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에서 게시 요청을 보내는 데 사용되는 경우 나머지 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 값이 form-data 의 예제에서 복사한 값이기 때문에 보내는 이미지의 크기가 19806 가 아니라는 것입니다. 자신의 데이터에 대해 계산된 것이 아니라 의 문서 를 참조하세요. 이로 인해 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
가장 낮은 레이어에서 헤더 내용 길이를 설정했는데 더 이상 해당 오류가 발생하지 않습니다.
이제 서버에서 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 도움이 필요하면 더 자세히 설명해야 합니다 ;-).

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가 언급했듯이 쿼리 문자열을 사용하십시오. 이것이 axios가 https://www.npmjs.com/package/axios#nodejs 에서도 권장하는 방법 form-data 패키지에는 여기에 모든 종류의 문제가 있으며 작동하도록 하기 위해 머리를 뽑게 될 것입니다.

@heldrida @ashok-sc querystring 또는 qs 를 어떻게 사용해야 합니까? axios를 사용하여 AWS Lambda에서 파일을 업로드하고 있으며 분명히 거기에서 File 객체에 액세스할 수 없습니다.

@bstolarz 귀하의 문제를 재현하기 위해 최선을 다했습니다. 하지만 할 수 없습니다. 나는 당신이하는 일을 모방하려고이 코드를 작성했습니다. 그러나 Content-Length 수동 설정을 의도적으로 생략했습니다. Content-Length 설정하고 있다는 사실이 귀하의 문제와 관련이 있을 수 있다고 확신합니다. form-data 가 알아서 계산하도록 하세요. 그래서 form.getHeaders() 호출해야 합니다.

이 페이스트를 참조하십시오: https://gist.github.com/binki/10ac3e91851b524546f8279733cdadad . 아마도 내 예와 일치하도록 axios.post() 또는 axios() 를 호출하는 방식을 수정할 수 있으며 작동할까요?

여전히 문제가 있는 경우 코드를 자체 스크립트로 이동하고 거기에서 재현해 보십시오. 문제를 해결하는 데 도움이 될 수 있습니다. 그래도 문제가 해결되지 않으면 axios() 또는 axios.post() 대한 호출을 포함하여 전체 코드를 요점으로 게시하고 여기에 링크하고 가능한 경우 조사하겠습니다.

고마워요. Content-Length를 추가하면 내 문제가 해결되었습니다. 이제 FormData와 함께 axios backend-2-backend 호출을 사용할 수 있습니다.
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 버킷에 게시하는 백엔드에 솔루션은 수동으로 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 버킷에 게시하는 백엔드에 솔루션은 수동으로 content-length ....를 설정하는 것으로 나타났습니다.

예. 나와 내 동료도 데이터가 제출되지 않는다고 응답하는 백엔드에 파일을 POST하려고 시도할 때 몇 시간을 보냈지만 요청을 추적하고 내용을 볼 수 있기 때문에 분명히 그렇습니다. 문제는 누락된 콘텐츠 길이 헤더였습니다.

참고로 FormData에 버퍼를 추가하는 경우 formData.getLengthSync() 를 호출해도 괜찮지만 스트림을 처리하는 경우 먼저 파일을 fs.statSync(filePath).size 또는 예를 들어 스트림이 요청이나 소켓 등에서 오는 경우와 같이 다른 방식으로 전체 크기를 가져옵니다(업스트림의 콘텐츠 길이 헤더에서). 스트림이 대신 디스크에서 오는 경우 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 를 잊어 버린 것 같습니다 ...