Click here to Skip to main content
15,743,541 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have been following along on a YouTube tut for creating a MERN blog. When I try to get data from MongoDB using Axios, I get a 404 error, saying it can't find /posts route. Please help me find what I am missing. I've only found this on Google once and there is no solution provided. I have tried changing up the axios.get path but no changes. The api is running on 5000 and react/client is on 3000. Any help would be appreciated.

My proxy:
"proxy": "http://localhost:5000/api/"
App.jsx :
<pre lang="Javascript">import Topbar from "./components/topbar/Topbar";
import Home from "./pages/home/Home";
import Login from "./pages/login/Login";
import Register from "./pages/register/Register";
import Settings from "./pages/settings/Settings";
import Single from "./pages/single/Single";
import Write from "./pages/write/Write";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

function App() {
  const currentUser = true;
  return (
    <Router>
      <Topbar />
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/posts">
          <Home />
        </Route>
        <Route path="/register">
          {currentUser ? <Home /> : <Register />}
        </Route>
        <Route path="/login">{currentUser ? <Home /> : <Login />}</Route>
        <Route path="/post/:id">
          <Single />
        </Route>
        <Route path="/write">{currentUser ? <Write /> : <Login />}</Route>
        <Route path="/settings">
          {currentUser ? <Settings /> : <Login />}
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

Home.jsx:
import { useEffect, useState } from "react";
import { useLocation } from "react-router";
import Header from "../../components/header/Header";
import Posts from "../../components/posts/Posts";
import Sidebar from "../../components/sidebar/Sidebar";
import axios from 'axios';
import "./home.css";

export default function Home() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const fetchPosts = async () => {
      const res = await axios.get("/posts")
      console.log(res)

    }
    fetchPosts()
    .then((res) => {
      this.setState({ total: res.data });
  })
  .catch((error) => {
      // here you will have access to error.response
      console.log(error.response)
  });
  },[])
  const location = useLocation();
  console.log(location);
  return (
    <>
      
      <div>
        <posts posts="{posts}/">
        <sidebar>
      </div>
    
  );
}

-----------------------------------------------------------------------------------
ERROR RECEIVED:
Quote:
GET http://localhost:3000/posts 404 (Not Found)
{pathname: '/posts', search: '', hash: '', state: undefined}
hash: ""
pathname: "/posts"
search: ""
state: undefined
[[Prototype]]: Object

{data: '\n\n\n\n
Cannot GET /posts
\n\n\n', status: 404, statusText: 'Not Found', headers: {…}, config: {…}, …}
config: {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …}
data: "\n\n\n\n<title>Error\n\n\n
Cannot GET /posts
\n\n\n"
headers: {access-control-allow-headers: '*', access-control-allow-methods: '*', access-control-allow-origin: '*', connection: 'keep-alive', content-length: '144', …}
request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
status: 404
statusText: "Not Found"
[[Prototype]]: Object


What I have tried:

I have tried everything I can think of on Google and no solutions.
Posted
Updated 14-Jan-22 6:38am
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900