Django 服务器无法从 React Axios 获取数据

huangapple go评论63阅读模式
英文:

Django server unable to get data from react Axios

问题

我没有收到错误消息,但是当我查看我的服务器日志时,每当我从我的React应用程序使用axios发送请求时,它会打印一个空对象{}。我仔细检查了一切,我的应用程序中的其他组件中的每个其他请求都正常工作,但只有在这个特定请求中数据没有被发送!我没有CORS问题!

我的React axios请求

// 用于发送API请求的PrivateAxios实例
const axiosPrivate = useAxiosPrivate();
const handleSearch = async () => {
  const data = JSON.stringify({ from_company: keyWord });
  try {
    const response = await axiosPrivate.get(SEARCH_URL, data);
    console.log(response);
    setRecords(response?.data);
  } catch (err) {
    if (!err?.response) {
      console.log("没有服务器响应");
    } else {
      console.log("有问题");
    }
  }
};

服务器日志

{} <-- 将请求数据打印为空对象
"GET /api/find_many/ HTTP/1.1" 200 6276

当我使用PostmanThunder Client发送请求时,Django服务器会返回正确的详细信息。服务器还会打印与Postman请求一起发送的对象。我不知道为什么服务器无法在我从React应用程序请求时获取对象或数据。

从Postman发送的请求返回

{'from_company': 'Jethmal Paliwal'}  <-- 正确打印请求数据
"GET /api/find_many/ HTTP/1.1" 200 2284

我已经仔细检查了一切,我的标头设置正确,Content-Type: application/jsonwithCredentials: true,以及所有其他可能的设置,甚至来自其他组件的每个请求都运行良好,但为什么这个特定请求不会到达服务器?

  • 尝试在请求函数中将数据写为对象
    const response = axiosPrivate.get(SEARCH_URL, { "from_company": "Jethmal Paliwal" }); 也不起作用。同样的空对象被打印。

  • 尝试使用JSON.stringify处理数据,也不起作用。

英文:

I'm not getting an error but when I saw the logs of my server it prints an empty object {} whenever I send a request to the sever from my react app using axios. I double checked everything every other request in another components of my app works fine, but only in this particular request the data is not being sent! I have no CORS issue!

My react axios request


  // PrivateAxios instance to send api request
  const axiosPrivate = useAxiosPrivate();
  const handleSearch = async () =&gt; {
    const data = JSON.stringify({ from_company: keyWord });
    try {
      const response = await axiosPrivate.get(SEARCH_URL, data);
      console.log(response);
      setRecords(response?.data);
    } catch (err) {
      if (!err?.response) {
        console.log(&quot;NO SERVER RESPONSE&quot;);
      } else {
        console.log(&quot;SOMETHING WRONG&quot;);
      }
    }
  };

Server log


{} &lt;-- Prints the request.data as an empty object
&quot;GET /api/find_many/ HTTP/1.1&quot; 200 6276

The django server responses with correct details when I send a request with Postman or Thunder Client. The server also prints the object that were sent with the Postman request. I don't know why the server is unable to get the object or data when I request from my react app.

Request sent from Postman returns


{&#39;from_company&#39;: &#39;Jethmal Paliwal&#39;}  &lt;-- Prints the request.data correctly
&quot;GET /api/find_many/ HTTP/1.1&quot; 200 2284

I have double checked everything, my headers are set correctly, Content-Type: application/json, withCredentials: true, and every other possible settings, Even every request from other components works great, but why this particular request doesn't reach the server?

  • Tried writing the data as an Object in the request funcion itself
    const response = axiosPrivate.get(SEARCH_URL, { &quot;from_company&quot;: &quot;Jethmal Paliwal&quot; }); which doesn't work as well. The same empty object gets printed.

  • Tried JSON.stringify the data, which doesn't work as well.

答案1

得分: 0

我认为axios会忽略数据,因为按照REST标准,不应该在GET请求中提交数据。HTTP允许这样做,但人们和显然库不会预期这种情况。

这是axios的GET方法API:

axios.get(url[, config])

如你所见,在方法签名中没有数据。而如果我们看一下POST方法:

axios.post(url[, data[, config]])

我建议如果你有数据要提交到服务器,最好使用POST方法。

英文:

I believe that axios is omitting the data as it's not per REST standard to submit data in the GET request. HTTP allows that, but people and apparently libraries are not expecting it.

This is the API for axios get method:

axios.get(url[, config])

as you see there is no data in the method signature. And if we look at the POST method:

axios.post(url[, data[, config]])

I suggest if you have data to submit to server that you use a POST method instead.

huangapple
  • 本文由 发表于 2023年1月9日 00:29:17
  • 转载请务必保留本文链接:https://go.coder-hub.com/75049465.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定