javascript - fetch POST is returning HTTP 415, while curl goes on fine and returns result - Stack Overflow

admin管理员组

文章数量:1342531

This is what my code looks like

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


        fetch('',{
            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 mand and this is what it looks like

➜  ~ curl -X POST -H "Content-Type: application/json" -d '{
  "authCode": "XXXX",
  "clientId": "YYYYY",
  "clientSecret": "ZZZZZZZZ"
}' 
{"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('',{
            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?

This is what my code looks like

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


        fetch('https://api.myapp./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 mand 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./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./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?

• javascript
• reactjs
• curl
• fetch-api

Share Improve this question Follow edited Mar 15, 2022 at 9:33 VLAZ 29.1k99 gold badges6363 silver badges8484 bronze badges asked May 26, 2017 at 2:36 daydreamerdaydreamer 92.2k204204 gold badges473473 silver badges750750 bronze badges 4

• 2 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 Commented May 26, 2017 at 2:39
• 3 JSON.stringify(body) ? – karthick Commented May 26, 2017 at 2:45
• 2 further to @karthick ment - 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 Commented May 26, 2017 at 2:49
• Thanks, see my update – daydreamer Commented May 26, 2017 at 8:27

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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) });

fetch() does not expect a JavaScript object at body. curl mand 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.

本文标签：