2

Get request sent from POSTMAN works but when sent from browser fails. At the backend req.body is undefined even after using bodyparser middleware. The same requet when sent from the POSTMAN works.

This is the axios call from the frontend.

await axios.get(`${API_URL}/api/authenticate`, {
            accesstoken: localStorage.getItem("accesstoken")
        },
            {
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'Access-Control-Allow-Origin': '*',
                    'Accept-Encoding': 'gzip, deflate, sdch'
                }
            })
            .then((res) => console.log(res))
            .catch((err) => {
                localStorage.removeItem("accesstoken");
                console.log(err)
            });

This is the backend auth handler

const isAuthenticated = (req,res,next)=>{
    const accesstoken = req.body.accesstoken;
    console.log(req.body);
    if(!accesstoken)
   {
    
    res.json({msg:"No token provided"});
   }
   else
   {
    jwt.verify(accesstoken,process.env.ACCESS_TOKEN_SECRETE,(err,decoded)=>{
        if(err)
        {
            
            res.json({msg:"Invalid token"});
        }
        else
         next();
        
    });
   }

}

These are the cors options

app.use(cors({
  origin:["http://localhost:3000","http://192.168.0.86:3000"],
  optionsSuccessStatus:200,
  credentials:true,
  allowHeaders:["Content-Type"]
}));
Makarand
  • 477
  • 1
  • 7
  • 17
  • Can you capture both requests (say, with tcpdump or wireshark) and diff them? – Allan Wind Feb 22 '21 at 09:05
  • Thank you for your response @AllanWind , actually i am bit unaware of tcpdump or wireshark but i can show you the destructuring of request object in backend. – Makarand Feb 22 '21 at 09:09
  • 1
    Thank you for responding @AjeetShah, actually it works fine with POSTMAN but when sent from browser it gives {msg:"No token provided"},in POSTMAN it returns {msg:"User has been authenticated"}. – Makarand Feb 22 '21 at 09:13

2 Answers2

2

The method signature you are using for axios.get applies to axios.post where the second parameter is the request body. This doesn't hold true for axios.get. You can pass query paramters as second argument of axios.get. Postman is allowing you to make GET requests with body and the server is okay with that but it isn't advised to do so. For your use case of authentication, use POST.

Lakshya Thakur
  • 8,030
  • 1
  • 12
  • 39
  • 1
    @makarand You should accept this answer. In my answer, I assumed you made a Typo. Also, you may want to read this : https://stackoverflow.com/q/42068572/2873538 . Go with `POST` for sending data until everyone (MDN, Postman, Browsers, HTTP client libraries etc.) start allowing `data` in `GET`. – Ajeet Shah Feb 22 '21 at 09:38
  • 1
    Absolutely no problem @AjeetShah , I have made the changes and it is working flawlessly , thank you. – Makarand Feb 22 '21 at 09:44
0

I guess, you meant to do axios.post:

await axios.post(`${API_URL}/api/authenticate`, {
  accesstoken: localStorage.getItem("accesstoken")
},
  {
      headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
          'Access-Control-Allow-Origin': '*',
          'Accept-Encoding': 'gzip, deflate, sdch'
      }
  })
  .then((res) => console.log(res))
  .catch((err) => {
      localStorage.removeItem("accesstoken");
      console.log(err)
  });
Ajeet Shah
  • 18,551
  • 8
  • 57
  • 87