415 on fetch POST with multipart FormData

Question

I have been going over countless posts and I am just stumped with this which should be so simple.

let formData = new FormData();
formData.append('message', payload.message);
formData.append('attachment', this.state.attachment);
let options = {
    method: 'post',
    body: formData
}
fetch('api/contact', options);

Then I get the all too familiar 415 error:

Request URL: https://localhost:44348/api/contact
Request Method: POST
Status Code: 415 
Remote Address: [::1]:44348
Referrer Policy: no-referrer-when-downgrade

I know not to set my Content-Type and even the headers and everything look fine including the boundary:

Request Headers

:authority: localhost:44348
:method: POST
:path: /api/contact
:scheme: https
accept: */*
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9
cache-control: no-cache
content-length: 10269
content-type: multipart/form-data; boundary=----WebKitFormBoundary5iTqTV6AaKla3BMA
origin: https://localhost:44348
pragma: no-cache
referer: https://localhost:44348/contact
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: same-origin
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Safari/537.36

Form Data

message: asdasd
attachment: (binary)

This is the same API I previously used with and old jQuery site and it worked fine. Any ideas?

is the `;` after `formData` in the options a typo in the question? — Andrew Nolan, Mar 19 '20 at 14:44
I see your content-type is normal, could you say me more clearly about the varibale "this.state.attachment" ? And in the console Chrome, could you view your request in Form Data and click view source for getting more infos of the data "attachment" ? — SanjiMika, Mar 19 '20 at 18:40
And normally what is the reponse of your request with which content-type (ex.: JSON) ? — SanjiMika, Mar 19 '20 at 18:55
You should provide more details (what implementation of HTTP is behind the API endpoint? What a jQuery request looks like?) — Guerric P, Mar 19 '20 at 22:37
I updated my .Net Core version... and it was case sensitive whereas the older version wasn't. So much wasted time :P — naspinski, Mar 25 '20 at 19:18

score 2 · Answer 1 · answered Mar 19 '20 at 15:03

2

let options = {
    method: 'post',
    body: formData
}

The semicolon ; after body in the JSON declaration might cause errors on running. This could be a problem please do check for that. As you're attaching an attachment, check if it is converted properly into binary format. Hope it helps!! Happy Coding!!

answered Mar 19 '20 at 15:03

Anglesvar

1,132
8
15

Not sure how that ';' got in the question, input error on my part (that wasn't it). – naspinski Mar 19 '20 at 18:15
As far a binary data, DevTools shows the Form Data exactly as I have above, with 'attachment: (binary)' so it appears so – naspinski Mar 19 '20 at 18:16

score 0 · Accepted Answer · answered Mar 27 '20 at 17:03

0

The older version of Core was not case sensitive when parsing incoming models, the newer version is.

answered Mar 27 '20 at 17:03

naspinski

34,020
36
111
167

415 on fetch POST with multipart FormData

2 Answers2