Welcome to Software Development on Codidact!

Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.

Review Suggested Edit

You can't approve or reject suggested edits because you haven't yet earned the Edit Posts ability.

Axios error bad request

import "./feed.css";
import Post from "../post/Post";
import Share from "../share/Share";
import { useState, useEffect } from "react";
import axios from "axios";
export default function Feed() {
const [posts, setPosts] = useState([]);
useEffect(() => {
const fetchPosts = async () => {
const res = await axios.get("posts/timeline/6538df8177465068b3aba917");
setPosts(res.data);
};
fetchPosts();
}, []);
return (
<div className="feed">
<div className="feedWrapper">
<Share />
{posts.map((p) => (
<Post key={p._id} post={p} />
))}
</div>
</div>
);
}
~~in my terminal for api-~~
> Backend Server is running
> Database Connected
> ::1 - - [26/Oct/2023:06:24:13 +0000] "GET /api/profile/posts/timeline/6538df8177465068b3aba917 HTTP/1.1" 404 190
> ::1 - - [26/Oct/2023:06:24:13 +0000] "GET /api/profile/posts/timeline/6538df8177465068b3aba917 HTTP/1.1" 404 190
~~in my browser at console -~~
> xhr.js:256
>
>
> GET http://localhost:3000/profile/posts/timeline/6538df8177465068b3aba917 404 (Not Found)
> dispatchXhrRequest @ xhr.js:256
> xhr @ xhr.js:49
> dispatchRequest @ dispatchRequest.js:51
> request @ Axios.js:146
> Axios.<computed> @ Axios.js:172
> wrap @ bind.js:5
> fetchPosts @ Feed.jsx:12
> (anonymous) @ Feed.jsx:15
> commitHookEffectListMount @ react-dom.development.js:23150
> commitPassiveMountOnFiber @ react-dom.development.js:24926
> commitPassiveMountEffects_complete @ react-dom.development.js:24891
> commitPassiveMountEffects_begin @ react-dom.development.js:24878
> commitPassiveMountEffects @ react-dom.development.js:24866
> flushPassiveEffectsImpl @ react-dom.development.js:27039
> flushPassiveEffects @ react-dom.development.js:26984
> (anonymous) @ react-dom.development.js:26769
> workLoop @ scheduler.development.js:266
> flushWork @ scheduler.development.js:239
> performWorkUntilDeadline @ scheduler.development.js:533
> Feed.jsx:14 Uncaught (in promise) AxiosError {message: 'Request failed > with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST',
> config: {…}, request: XMLHttpRequest, …}
> fetchPosts @ Feed.jsx:14
> await in fetchPosts (async)
> (anonymous) @ Feed.jsx:15
> commitHookEffectListMount @ react-dom.development.js:23150
> commitPassiveMountOnFiber @ react-dom.development.js:24926
> commitPassiveMountEffects_complete @ react-dom.development.js:24891
> commitPassiveMountEffects_begin @ react-dom.development.js:24878
> commitPassiveMountEffects @ react-dom.development.js:24866
> flushPassiveEffectsImpl @ react-dom.development.js:27039
> flushPassiveEffects @ react-dom.development.js:26984
> (anonymous) @ react-dom.development.js:26769
> workLoop @ scheduler.development.js:266
> flushWork @ scheduler.development.js:239
> performWorkUntilDeadline @ scheduler.development.js:533
> xhr.js:256
> GET http://localhost:3000/profile/posts/timeline/6538df8177465068b3aba917
404 (Not Found)
> dispatchXhrRequest @ xhr.js:256
> xhr @ xhr.js:49
> dispatchRequest @ dispatchRequest.js:51
> request @ Axios.js:146
> Axios.<computed> @ Axios.js:172
> wrap @ bind.js:5
> fetchPosts @ Feed.jsx:12
> (anonymous) @ Feed.jsx:15
> commitHookEffectListMount @ react-dom.development.js:23150
> invokePassiveEffectMountInDEV @ react-dom.development.js:25154
> invokeEffectsInDev @ react-dom.development.js:27351
> commitDoubleInvokeEffectsInDEV @ react-dom.development.js:27330
> flushPassiveEffectsImpl @ react-dom.development.js:27056
> flushPassiveEffects @ react-dom.development.js:26984
> (anonymous) @ react-dom.development.js:26769
> workLoop @ scheduler.development.js:266
> flushWork @ scheduler.development.js:239
> performWorkUntilDeadline @ scheduler.development.js:533
> Feed.jsx:14 Uncaught (in promise) AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
~~Please help me with it, as I am unable to do further.~~
My Axios is showing error in browser while in the API its showing "Bad Request". It's not internal 500, I have checked that out, but it's 400 Bad Request. I don't know why is it coming.... please help me with it...

I'm trying to use this code with Axios:
import "./feed.css";
import Post from "../post/Post";
import Share from "../share/Share";
import { useState, useEffect } from "react";
import axios from "axios";
export default function Feed() {
const [posts, setPosts] = useState([]);
useEffect(() => {
const fetchPosts = async () => {
const res = await axios.get("posts/timeline/6538df8177465068b3aba917");
setPosts(res.data);
};
fetchPosts();
}, []);
return (
<div className="feed">
<div className="feedWrapper">
<Share />
{posts.map((p) => (
<Post key={p._id} post={p} />
))}
</div>
</div>
);
}
But I see 404 errors in the terminal managing the API:
> Backend Server is running
> Database Connected
> ::1 - - [26/Oct/2023:06:24:13 +0000] "GET /api/profile/posts/timeline/6538df8177465068b3aba917 HTTP/1.1" 404 190
> ::1 - - [26/Oct/2023:06:24:13 +0000] "GET /api/profile/posts/timeline/6538df8177465068b3aba917 HTTP/1.1" 404 190
and I get errors in the browser console:
> xhr.js:256
>
>
> GET http://localhost:3000/profile/posts/timeline/6538df8177465068b3aba917 404 (Not Found)
> dispatchXhrRequest @ xhr.js:256
> xhr @ xhr.js:49
> dispatchRequest @ dispatchRequest.js:51
> request @ Axios.js:146
> Axios.<computed> @ Axios.js:172
> wrap @ bind.js:5
> fetchPosts @ Feed.jsx:12
> (anonymous) @ Feed.jsx:15
> commitHookEffectListMount @ react-dom.development.js:23150
> commitPassiveMountOnFiber @ react-dom.development.js:24926
> commitPassiveMountEffects_complete @ react-dom.development.js:24891
> commitPassiveMountEffects_begin @ react-dom.development.js:24878
> commitPassiveMountEffects @ react-dom.development.js:24866
> flushPassiveEffectsImpl @ react-dom.development.js:27039
> flushPassiveEffects @ react-dom.development.js:26984
> (anonymous) @ react-dom.development.js:26769
> workLoop @ scheduler.development.js:266
> flushWork @ scheduler.development.js:239
> performWorkUntilDeadline @ scheduler.development.js:533
> Feed.jsx:14 Uncaught (in promise) AxiosError {message: 'Request failed > with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST',
> config: {…}, request: XMLHttpRequest, …}
> fetchPosts @ Feed.jsx:14
> await in fetchPosts (async)
> (anonymous) @ Feed.jsx:15
> commitHookEffectListMount @ react-dom.development.js:23150
> commitPassiveMountOnFiber @ react-dom.development.js:24926
> commitPassiveMountEffects_complete @ react-dom.development.js:24891
> commitPassiveMountEffects_begin @ react-dom.development.js:24878
> commitPassiveMountEffects @ react-dom.development.js:24866
> flushPassiveEffectsImpl @ react-dom.development.js:27039
> flushPassiveEffects @ react-dom.development.js:26984
> (anonymous) @ react-dom.development.js:26769
> workLoop @ scheduler.development.js:266
> flushWork @ scheduler.development.js:239
> performWorkUntilDeadline @ scheduler.development.js:533
> xhr.js:256
> GET http://localhost:3000/profile/posts/timeline/6538df8177465068b3aba917
404 (Not Found)
> dispatchXhrRequest @ xhr.js:256
> xhr @ xhr.js:49
> dispatchRequest @ dispatchRequest.js:51
> request @ Axios.js:146
> Axios.<computed> @ Axios.js:172
> wrap @ bind.js:5
> fetchPosts @ Feed.jsx:12
> (anonymous) @ Feed.jsx:15
> commitHookEffectListMount @ react-dom.development.js:23150
> invokePassiveEffectMountInDEV @ react-dom.development.js:25154
> invokeEffectsInDev @ react-dom.development.js:27351
> commitDoubleInvokeEffectsInDEV @ react-dom.development.js:27330
> flushPassiveEffectsImpl @ react-dom.development.js:27056
> flushPassiveEffects @ react-dom.development.js:26984
> (anonymous) @ react-dom.development.js:26769
> workLoop @ scheduler.development.js:266
> flushWork @ scheduler.development.js:239
> performWorkUntilDeadline @ scheduler.development.js:533
> Feed.jsx:14 Uncaught (in promise) AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
What is wrong, and how do I fix it?

axios

javascript axios

Communities

Review Suggested Edit