title: NextJS, fetch, multipart/form-data, missing boundary
body: <p>I've faced with issue while proxy http request with multipart form data by NextJS. I have to send file from a client fide to next js, after that - to FastApi service.</p>
  <p>The problem was:</p>
  <pre><code> fetch(&quot;https://127.0.0.1:3000/api/newfile&quot;, {
     method: &quot;POST&quot;,
     headers: { &quot;Content-Type&quot;: &quot;multipart/form-data&quot; },
     body: new FormData(form)
   });
  </code></pre>
  <blockquote>
  <p>headers request: &quot;Content-Type: multipart/form-data&quot;</p>
  </blockquote>
  <p>In order for NextJS API to parse the file, you need a header with boundary</p>
  <p>Something like this:</p>
  <blockquote>
  <p>multipart/form-data; boundary=----&lt; generate boundary &gt;</p>
  </blockquote>
  <p>For a long time I could not figure out how to get it.
  There is an exit. It is necessary not to fill in &quot;Content-Type&quot;.
  And then the browser itself will generate this header by passing the form-data.</p>
  <p>For example:</p>
  <pre><code>fetch(&quot;https://127.0.0.1:3000/api/newfile&quot;, {
     method: &quot;POST&quot;,
     headers: {},
     body: new FormData(form)
   });
  </code></pre>
  <p>I also noticed that the problem concerns fetch</p>
  <p>When I used XMLHttpRequest I didn't face such problem.</p>
  <p>Further, the header can easily be passed further to FastAPI</p>
  <p>in API:</p>
  <pre><code>req.headers[&quot;content-type&quot;]
  </code></pre>