CODEWITHSUNDEEP
reactjsaxios
Hoshizora-N
Hoshizora-N

Reputation: 47

axios post sent request twice

im trying to send some data to server, but my request being sent twice, i've reading some stackoverflow question and answer but can't figure out what's wrong in my code, Screenshot, pls help me, if you need some details i will happily provide some details, sorry for the bad english

import React from "react";
import "./App.css";
import { Route, Routes } from "react-router-dom";
import axios from "axios";
import Login from "./components/Login/login";
import Sidebar from "./components/Sidebar/sidebar";
import Dashboard from "./components/Dashboard/dashboard";
import Goods from "./components/Goods/goods";
import Sales from "./components/Sales/sales";
import Users from "./components/Users/users";

function App() {
const token = localStorage.getItem("token");

if (token) {
    axios
        .post("http://localhost:3100/admin/checkToken", {
            token: token,
        })
        .then((res) => {
            console.log(res);
        });

    return (
        <div className="App">
            <Sidebar />
            <Routes>
                <Route path="/" element={<Dashboard />} />
                <Route path="/goods" element={<Goods />} />
                <Route path="/sales" element={<Sales />} />
                <Route path="/users" element={<Users />} />
            </Routes>
        </div>
    );
} else {
    return (
        <div className="App">
            <Login />
        </div>
    );
}
}

export default App;

Upvotes: 1

Views: 3234

Answers (3)

Ваня Ильницкий
Ваня Ильницкий

Reputation: 1

I had a similar problem. I used React and made requests using axios. Try removing React.StrictMode

Upvotes: 0

Dan
Dan

Reputation: 970

the reason for request twice is that: it's a cross domain request enter image description here

open chrome F12, can see the type of the two reqs is different. One is preflight, the other is Xhr.

the chrome browser detects the request is cross-domain, it will use CORS to communicate, auto adds some headers, CORS: simple request will send one request; and no-so-simple request will send two requests. and no-simple-req will have a pre-check , which is called preflight. The browser asks the server, if current URL/Page is permitted to access the server data. Once gets the permit, the browser will send the second request and get the data.

Upvotes: 0

PasVV
PasVV

Reputation: 593

Looks like you should wrap your API call to componentDidMount lifecycle method. Like that:

import React, { useEffect } from "react";
import "./App.css";
import { Route, Routes } from "react-router-dom";
import axios from "axios";
import Login from "./components/Login/login";
import Sidebar from "./components/Sidebar/sidebar";
import Dashboard from "./components/Dashboard/dashboard";
import Goods from "./components/Goods/goods";
import Sales from "./components/Sales/sales";
import Users from "./components/Users/users";

function Foo() {
  if (!localStorage.getItem("token")) return <Login />;

  return <Bar />;
}

function Bar() {
  useEffect(() => {
    axios
        .post("http://localhost:3100/admin/checkToken", {
            token: localStorage.getItem("token"),
        })
        .then((res) => {
            console.log(res);
        });
  }, []);

  return (
    <div className="App">
        <Sidebar />
        <Routes>
            <Route path="/" element={<Dashboard />} />
            <Route path="/goods" element={<Goods />} />
            <Route path="/sales" element={<Sales />} />
            <Route path="/users" element={<Users />} />
        </Routes>
    </div>
  );
}

export default Foo;

Read more about component lifecycle in docs.

Upvotes: 1

Related Questions