Expressjs API variables undefined-CodePudding

i'm trying to create my first API using nodejs / express js for backend and React for frontend. I'm able to call the API via postman but not via localhost on frontend as the path returns "undefined" and my "mediaType" and "id" are undefined.

The frontend should call the API

BACKEND

const express = require("express");
const app = express();
const PORT = 8080;
const axios = require("axios");

app.use(express.json());

app.get("/test", (req, res) => {
  // const { mediaType, id } = req.params;
  const { mediaType, id } = req.body;

  const options = {
    methond: "GET",
    url: `https://api.themoviedb.org/3/${mediaType}/${id}?api_key=${APIKEY}&language=en-US`,
    // headers: {

    // }
  };

    axios.request(options).then((response) => {
        res.send(response.data);
    
      }).catch((error) => {
        console.log(error)
      })
  

});

FRONTEND

  const fetchData = async () => {
    const { data } = await axios.get(
      `http://localhost:8080/test`, { params: { mediaType: mediaType, id: id  } }
    );

    setContent(data);
    
  };

PART OF HEADER

_header: 'GET /3/undefined/undefined?api_key=XXX&language=en-US HTTP/1.1\r\n'  
    'Accept: application/json, text/plain, */*\r\n'  
    'User-Agent: axios/0.27.2\r\n'  
    'Host: api.themoviedb.org\r\n'  
    'Connection: close\r\n'  
    '\r\n',

CodePudding user response：

Alright, for anyone interested...

i updated the FE req

  const fetchData = async () => {
    const { data } = await axios.get(   
         `http://localhost:8080/test2?mediaType=${mediaType}&id=${id}`
    );
    setContent(data);
      };

And changed the BE req also, to use query parameters

      app.get("/test2", (req, res) => {
          // const { mediaType, id } = req.params;
        
          mediaType = req.query.mediaType;
          id = req.query.id;
        
          const options = {
            methond: "GET",
            url: `https://api.themoviedb.org/3/${mediaType}/${id}?api_key=${apiKey}&language=en-US`,
            // headers: {
        
            //

 }
      };
    
      axios
        .request(options)
        .then((response) => {
          res.send(response.data);
        })
        .catch((error) => {
      console.log(error);
    });
});

Also needed to update CORS (no idea how it works????) as it blocked my localhost testing

const cors = require("cors");

app.use(
  cors({
    origin: "http://localhost:3000",
    credentials: true, //access-control-allow-credentials:true
    optionSuccessStatus: 200,
  })
);

Now it seems that everything works!

CodePudding user response：

You accept body parameters in your API endpoint so with axios you should use data parameter with your body data included and send it to your backend:

const fetchData = async () => {
const { data } = await axios.get(
  `http://localhost:8080/test`, { data: { mediaType: mediaType, id: id  } } <--- check data key here
);

setContent(data);

};

by the way, it's not a good idea to send body HTTP request with GET http verb