다중/폼 데이터 헤더와 FormData이 잘 작동 CURL 예입니다

Question

를 가져올 사용하여 POST 방법 : 내가 isomorphic-fetch를 사용하여이 요청을 재현하기 위해 노력하고있어

curl -X POST \ 
    <url> \ 
    -H 'authorization: Bearer <token>' \ 
    -H 'content-type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW' \ 
    -F file=@algorithm.jpg \ 
    -F userId=<userId> 

.

const formData = new FormData(); 
formData.append('file', file); 
formData.append('userId', userId); 

return fetch(`<url>`, {  
    method: 'POST', 
    headers: { 
    'Content-Length': file.length 
    'Authorization: Bearer <authorization token>', 
    'Content-Type': 'multipart/form-data' 
    }, 
    body: formData 
})` 

내가 FormData에 전달 된 file을 생성하기 위해 fs.readFileSync를 사용

나는 다음과 같은 코드를 시도했습니다.

위의 예는 (헤더를 통해 전송) 토큰에 포함 된 userId가 userId이 formData에서 전달 일치하지 않는 없다는 오류 메시지와 함께 401 HTTP 상태 코드 (무단)을 반환합니다.

그래서 내 생각에 REST API에 도착한 FormData이 적절히 형성되지 않았다는 것입니다.

문제

은 Content-Length 헤더와 관련이있을 수 있습니다,하지만 난 (내가 Content-Length 헤더를 사용하지 않는 경우 내가 411 HTTP 상태 코드 Content-Length 헤더 누락 수)을 계산하는 더 좋은 방법을 찾지 못했습니다.

Content-Length 헤더의 값이 올바르지 않아 실패 할 수 있습니까?

왜 이것이 실패하고 더 좋은 방법을 디버깅하는 지에 대한 다른 제안 사항이 있습니까?

이 문제를 명확히하려면 추가 정보가 필요하면 질문하십시오.

문제가 같은 (401 오류 HTTP 상태 코드 응답) 유지 그러나 나는 방법 formData.getLengthSync()

를 사용하여 올바른 Content-Length 값을 얻기 위해 form-data 모듈을 시도했습니다

UPDATE.

Answer 1

당신이 당신의 네트워크 관리자를 열 경우,이 코드를 실행하고 Content-Length이 올바르게 설정되어 있는지보아야한다 양식을 제출

const foo = document.getElementById('foo') 
 
foo.addEventListener('submit', (e) => { 
 
    e.preventDefault() 
 
    const formData = new FormData(foo) 
 
    formData.append('userId', 123) 
 
    fetch('//example.com', { 
 
    method: 'POST', 
 
    body: formData 
 
    }) 
 
})

<form id="foo"> 
 
    <input id="file" type="file" name="file"/><br><br> 
 
    <button type="submit">Submit</button> 
 
</form>