fetch POST is returning HTTP 415, while curl goes on fine and returns result

Question

This is what my code looks like

let body = {
            authCode: "XXXX",
            clientId: "YYYYYY",
            clientSecret: "ZZZZZZ"
        };


        fetch('https://api.myapp.com/oauth/token',{
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json"
            },
            mode: 'no-cors',
            body: body
        }).then(function(response){
            console.log("response: ", response);
        }).catch(function(error){
            console.log("could not get tokens: ", error);
        })

In Chrome, this is what I see

I tried to do this by curl command and this is what it looks like

➜  ~ curl -X POST -H "Content-Type: application/json" -d '{
  "authCode": "XXXX",
  "clientId": "YYYYY",
  "clientSecret": "ZZZZZZZZ"
}' https://api.myapp.com/oauth/token
{"authToken":"e141kjhkwr3432ca9b3d2128385ad91db4cd2:cca6b151-cab4-4de2-81db-9a739a62ae88:23000000"}

What am I doing wrong here?

UPDATE

After changing it to following, the result is still HTTP 415

fetch('https://api.myapp.com/oauth/token',{
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json"
            },
            mode: 'no-cors',
            body: JSON.stringify(body)
        }).then(function(response){
            console.log("response: ", response);
        }).catch(function(error){
            console.log("could not get tokens: ", error);
        })

Interestingly, I realized that I sent the header "Content-Type": "application/json" while what I get back is content-type: text/plain, why that might be happening?

do you understand what `mode: 'no-cors'` does? Not saying that's your problem (the problem is most likely with the server side, I mean, why is it responding with 415, client side code can't really help with figuring that out) - but `mode: no-cors` will mean your code will always fail to access the response — Jaromanda X, May 26 '17 at 02:39
further to @karthick comment - `body: Any body that you want to add to your request: this can be a Blob, BufferSource, FormData, URLSearchParams, or USVString object.` - an object is none of these — Jaromanda X, May 26 '17 at 02:49

score 6 · Answer 1 · answered Jul 04 '20 at 12:07

you must define Accept and Content-Type headers like that and stringify your data object

const params = {
            headers: {
                'Accept': "application/json, text/plain, */*",
                'Content-Type': "application/json;charset=utf-8"
            },
            body: JSON.stringify(yourObject),
            method: "POST"
        };

fetch(url, params)
        .then(data => { console.log('data', data)})
        .then(res => { console.log('res', res) })
        .catch(error => { console.log('error', error) });

why it is required as a must? – jamesjara Sep 16 '20 at 05:00 — jamesjara, Sep 16 '20 at 05:00

guest271314 · Answer 2 · 2017-05-26T03:13:52.057

2

fetch() does not expect a JavaScript object at body. curl command and fetch() pattern are not the same. Use body: JSON.stringify(<javascript plain object>).

Request

Note: The body type can only be a Blob, BufferSource, FormData, URLSearchParams, USVString or ReadableStream type, so for adding a JSON object to the payload you need to stringify that object.

See Fetch with ReadableStream for status of implementation of ReadableStream set as value for body.

edited May 26 '17 at 03:13

answered May 26 '17 at 03:00

guest271314

1
15
104
177

Thanks, see my update. The response is still the same – daydreamer May 26 '17 at 08:27
@daydreamer Why do you set `headers: { "Content-Type": "application/json", "Accept": "application/json" }, mode: 'no-cors'` headers? What is expected response? – guest271314 May 26 '17 at 14:33
expected response js in `JSON`. 'no-cors' since preflight requests fail otherwise – daydreamer May 26 '17 at 17:07
@daydreamer Response does not have CORS headers set. Why do you expect a `JSON` response? – guest271314 May 26 '17 at 17:09
The `fetch()` fails if I do not have `no-cors` set. – daydreamer May 26 '17 at 17:10
`Fetch API cannot load https://api.myapp.com/oauth/token. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 415. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.` – daydreamer May 26 '17 at 17:12
Well, it's not, but the question is that while tools like postman/curl do not have issues, browsers seem more strict about this – daydreamer May 26 '17 at 17:58
@daydreamer _"Well, it's not, but the question is that while tools like postman/curl do not have issues, browsers seem more strict about this"_ That is not the present Question. The original question does not mention postman or `curl`. – guest271314 May 26 '17 at 18:01
I agree with what you said. Thanks – daydreamer May 26 '17 at 18:32

fetch POST is returning HTTP 415, while curl goes on fine and returns result

2 Answers2

Linked