Getting Bad request for POST request using Axios and CORS in Django and react app

Question

I made a post request to this url http://localhost:8000/api/auth/users/ on postman . It was successful. However, trying the same thing on my react front end produces a 400 (bad request error). It also says Uncaught (in promise) Error: Request failed with status code 400

Here's my code AuthAPi.js:

import API from "./API"; 

const config = {
  headers :{
    "Content-Type": "application/json",
   }
}

const signIn = (email, password) => API.post("/auth/users/", {
  params : {
    email : email,
    password : password 
    
  },
},
  config
)
.Catch((error) => console.log( error.message ) );

export { signIn };

and API.js

import axios from 'axios';

export default axios.create({
  baseURL: `http://127.0.0.1:8000/api`,
  headers: {
    "Content-type": "application/json"
  }
});

I've tried several links without solutions. I'd be glad to get assistance here.

There is below a screenshot a console log, Network log and Django server log:

Could you share your Django code? The bad request (400) error is not due to CORS policy. — Kungfu Frog
– Kungfu Frog, Commented Nov 10, 2020 at 12:54

Nick Dawes · Accepted Answer · 2020-11-10 13:09:45Z

1

With this code:

API.post("/auth/users/", {
  params : {
    email : email,
    password : password 
  }
}

You’re passing an object which contains an object to axios as post data. Axios doesn’t mind, but your server no-likey. Instead, try:

API.post("/auth/users/", {
  email : email,
  password : password 
}, config)

This should work. If you want to pass in as a single object, you need to declare it outside of the api call:

let postData = {
  email: email,
  password: password
}
API.post("/auth/users/", postData, config)

answered Nov 10, 2020 at 13:09

Nick Dawes

2,2641 gold badge15 silver badges25 bronze badges

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

4 Comments

cyrille gate Over a year ago

Thanks, I tried it this way and it still doesn't work.

cyrille gate Over a year ago

Yes, it still the same

Nick Dawes Over a year ago

We need to see the response and request objects. You’ll find them in the network tab in your dev tools. Update your question with screenshots or copy the entire text (headers and body data). That way we’ll be able to troubleshoot a little further.

cyrille gate Over a year ago

Thanks, I have just added images @Nick Dawes

Sargis Mkoyan · Accepted Answer · 2020-11-10 13:10:18Z

1

params are the URL parameters to be sent with the request

The signature of post instance method that you used is axios#post(url[, data[, config]]), thus you should make your request like this

const signIn = (email, password) => API.post("/auth/users/", {
    email : email,
    password : password 
  },
  config
)

answered Nov 10, 2020 at 13:10

Sargis Mkoyan

2061 silver badge5 bronze badges

1 Comment

cyrille gate Over a year ago

Thanks, I tried it this way and it still doesn't work.

Collectives™ on Stack Overflow

Getting Bad request for POST request using Axios and CORS in Django and react app

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related