Posting data to django rest framework using javascript fetch

Question

I'm trying to post data to my django rest framework using javascript fetch. I've already set up and liked the DRF to my model and got everything set up from the backend. I used the postman app to ensure "get", "post" etc are all working as interned. However, now I'm having problem posting data using javascript to post the data using fetch. I want to add data to my article model which has a "headline", "tag", "content", "background_image" and the user that posted the article.

This is how my code looks like

data = JSON.stringify({
    headline: "Testing",
    tag: "Testing",
    background_image: "Testing",
    content: "Testing",
    user: 1
})
fetch(
            "http://127.0.0.1:8000/api/v1/articlesapi/",
            {
                method: "post",
                headers: {"Authorization":"Token ed73db9bf18f3c3067be926d5ab64cec9bcb9c5e"},
                body: data
            }
 ).then(function(response) {
    return response.json();
}).then(function(data) {
    console.log("Data is ok", data);
}).catch(function(ex) {
    console.log("parsing failed", ex);
})

However, I keep getting the error parsing failed TypeError: Failed to fetch. Does anybody know what I'm doing wrong ?

karolinski · Accepted Answer · 2017-07-25 16:03:12Z

3

Please add "Content Type" and "Accept" properties in your header, I think it could be a reason of your error. Let me know if it works :-)

fetch('"http://127.0.0.1:8000/api/v1/articlesapi/', {
      method: 'post',
      headers: {
        'Accept': 'application/json, text/plain, */*',
        'Content-Type': 'application/json',
        'Authorization':'Token ed73db9bf18f3c3067be926d5ab64cec9bcb9c5e'
      },
      body: JSON.stringify({data: "your data"})
    }).then(res=>res.json())
      .then(res => console.log(res));

answered Jul 25, 2017 at 16:03

karolinski

5771 gold badge6 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

alpha787 Over a year ago

Just did that and got the following error Uncaught (in promise) TypeError: Failed to fetch

karolinski Over a year ago

hmm try with "Content-Type": "text/plain" in header.

alpha787 Over a year ago

Yep, that seems to have fixed it. Thanks for your help mate

Collectives™ on Stack Overflow

Posting data to django rest framework using javascript fetch

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related