0

I'm tried to fatch my api data from backend by using axios. I'm getting an error, like this:

POST http://localhost:3000/undefined/post 404 (Not Found)

API routes like this:

// route middleware
app.use("/api", portRoutes);

// passing on controllers
router.post("/post", create);

// rest of code will have in controller folder

Now I have tried to work in frontend

I have tried by this way:

.env file

REACT_APP_API = http://localhost:8000/api

I dont know why does not access my server side links

handleSubmit function

const handleSubmit = (e) => {
    e.preventDefault();

    // access data from backend
    axios
      .post(`${process.env.REACT_APP_API}/post`, { title, content, user })
      .then((response) => {
        console.log(response);
        setState({ ...state, title: "", content: "", user: "" });
        alert(`Post Title ${response.data.title} is created`);
      })
      .catch((error) => {
        console.log(error.response);
        alert(error.response.data.error);
      });
  };

I'm sure my api is ok, I have checked my api with postman software.

Alamin
  • 1,878
  • 1
  • 14
  • 34
  • 2
    If you are sending a query to `http://localhost:3000/undefined/post` that means that `process.env.REACT_APP_API` is undefined – Saddy Mar 02 '21 at 17:21
  • I don't know why show me `undefined` it should be `api` – Alamin Mar 02 '21 at 17:24
  • 2
    Your code is running in a browser, `process.env.REACT_APP_API` is from node.js which is on the server side. You can't access server side env vars from client side js directly. – SuperStormer Mar 02 '21 at 17:29
  • if you are working with webpack and it's processing `process.env` for you, ensure you have the correct configuration in your `package.json` being set. – lastr2d2 Mar 02 '21 at 18:22
  • also if you are working with `create-react-app`, ensure you have `react-scripts` >`0.2.3` and proper `react-scripts` commands for your `npm start` script – lastr2d2 Mar 02 '21 at 18:44
  • @lastr2d2 right now I'm using `"react-scripts": "4.0.1",` this version – Alamin Mar 03 '21 at 01:56
  • 1
    @Sheikh then there are a few debugging tips https://stackoverflow.com/a/53237511/553073 – lastr2d2 Mar 03 '21 at 02:03
  • @lastr2d2 Thanks man, you save my time by send this link. – Alamin Mar 03 '21 at 02:20
  • 1
    Actually, I forgot re-start my client server + my backend server was stop – Alamin Mar 03 '21 at 02:23
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/229431/discussion-between-sheikh-and-lastr2d2). – Alamin Mar 03 '21 at 02:26

3 Answers3

4

You cant access .env file from server side in your frontend app.

My suggestion is create in your frontend a config axios file

import axios from 'axios';

const api = axios.create({
  baseURL: 'http://localhost:8000/api',
});

export default api;

Then in your handleSubmit function:

const handleSubmit = (e) => {
    e.preventDefault();

    // access data from backend
    api
      .post(`/post`, { title, content, user })
      .then((response) => {
        console.log(response);
        setState({ ...state, title: "", content: "", user: "" });
        alert(`Post Title ${response.data.title} is created`);
      })
      .catch((error) => {
        console.log(error.response);
        alert(error.response.data.error);
      });
  };
Caio Queiroz
  • 51
  • 2
  • it can be done with a `create-react-app` which OP could use. the `process.env.REACT_APP_X` will be replaced during the build, https://create-react-app.dev/docs/adding-custom-environment-variables – lastr2d2 Mar 02 '21 at 18:41
0

I have solved my error from this link Please feel free read this article if you faced same problem, that I have faced.

Thank you.

Alamin
  • 1,878
  • 1
  • 14
  • 34
0

this is also due to .env file in src folder... move it outside of src folder to the main client folder

Anand Giri
  • 11
  • 4