Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

axios 'get' not working on metronic theme


My company uses Metronic 7.2.9 as I'm a new developer and implementing the theme for the frontend part. But the problem is when I am using Axios for any get or post method, it always shows a 404 response. But the fetch method is working fine.

The theme is fresh and used only for two days. I don't know why Axios is not working. Can anyone help, pls?

Thanks


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)


Hi,

Try to follow this doc https://keenthemes.com/metronic/?page=docs&section=react-mock-back-end, it should help you.

Regards,
Keenthemes support



Can you check the request URL? If you see the URL is correct, you should have more details about the request sending code and received code and request debugs. Please use catch promise and share the logs with us.

* I don't think this is theme-related.



Thanks for replying. Should I do something when initially setting up the theme? Like, need some changes in the .env file or mockAxios file to work locally (localhost:3000).

import Axios from "axios";

export const getBlogPosts = async (setter) => {
try {
const res = await Axios.get(`https://jsonplaceholder.typicode.com/posts/1`);

if (res.status === 200 && res?.data) {
setter(res?.data);
console.log('blog post');
}
} catch (error) {
console.log(error.message);
}
};

this is my code.

import React, { useEffect, useState } from "react";
import { getBlogPosts } from "./_helper";
export function TestCustomerCreate() {
const [gridData, setGridData] = useState();
useEffect(() => {
getBlogPosts(setGridData);
}, []);
console.log(gridData);
return (
<div>
<h1>This is test create form</h1>
</div>
);
}

sts code : Request failed with status code 404
error.response: data: undefined


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(