在 Django 和 React 应用程序中使用 Axios 和 CORS 获取 POST 请求的错误请求

Question

我在 postman 上向 url http://localhost:8000/api/auth/users/ 发出了 post 请求。它是成功的。但是，在我的反应前端尝试同样的事情会产生 400（错误请求错误）。它还说 Uncaught (in promise) Error: Request failed with status code 400

这是我的代码 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 };

和API.js

import axios from 'axios';

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

我试了好几个链接都没有解决办法。我很乐意在这里得到帮助。

控制台日志、网络日志和 Django 服务器日志的屏幕截图如下：

Answer 1

使用此代码：

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

您正在将一个包含对象的对象作为 post 数据传递给 axios。 Axios 不介意，但你的服务器不喜欢。相反，尝试：

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

这应该有效。如果要作为单个对象传入，则需要在 api 调用之外声明它：

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

Answer 2

params 是要随请求一起发送的 URL 参数

您使用的 post 实例方法的签名是 axios#post(url[, data[, config]])，因此您应该这样提出请求

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

在 Django 和 React 应用程序中使用 Axios 和 CORS 获取 POST 请求的错误请求

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

javascript

reactjs

django-cors-headers

axios