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.

Post History

33%

+0 −2

Q&A Axios error bad request [closed]

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...

0 answers · posted 1y ago by AyeshSoul‭ · closed 1y ago by Alexei‭

Question javascript axios

#4: Question closed by

Alexei‭ · 2023-10-30T18:58:27Z (about 1 year ago)

Copy Link

Raw

Markdown

#3: Post edited by

Karl Knechtel‭ · 2023-10-27T05:47:17Z (about 1 year ago)
Ask directly; explicitly introduce the code; remove noise/redundancy; add language tag

Copy Link

Raw

Markdown

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

#2: Post edited by

FractionalRadix‭ · 2023-10-26T09:18:23Z (about 1 year ago)
Fixed grammar. Applied markdown.

Copy Link

Raw

Markdown

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 api its showing bad request its not internal 500 i have checked that out but it 400 bad request i dont know why is it coming.... please help me with it...

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...

#1: Initial revision by

AyeshSoul‭ · 2023-10-26T06:47:07Z (about 1 year ago)

Copy Link

Raw

Markdown

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 api its showing bad request its not internal 500 i have checked that out but it 400 bad request i dont know why is it coming.... please help me with it...

axios

Communities

Post History