I am experiencing an issue with connecting to an API on localhost:5000. The API works perfectly when called from Postman or the browser, but it does not work when called inside Next.js getserverside props:
mport { useEffect,useState } from "react";
import { GetStaticProps, GetStaticPaths, GetServerSideProps } from 'next'
import Axios, {AxiosResponse} from 'axios'
interface Data{
labels: string[],
series:number[][]
}
function Chart(props) {
const [data,setData]= useState<Data>()
useEffect(()=>{
console.log(props)
let fetchedData = {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
series: [
[6,5,3,2,1]
]
}
setData(fetchedData)
},[])
new Chartist.Line('.ct-chart', data);
useEffect(() => {
setTimeout(() => {
/* do stuff */
}, );
}, []);
return (
<>
<div className="ibox ">
<div className="ibox-title">
<h5>Simple line chart
</h5>
</div>
<div className="ct-chart ct-perfect-fourth"></div>
</div>
</>
)
}
export const getServerSideProps: GetServerSideProps = async (context) =>{try {
const res = await Axios.get("http://localhost:5000/api/charts/2")
let data= await res.data;
return { props: { data } }
} catch (err) {
console.log(err)
}}
export default Chartand it's showing this error message :
port: 5000,
address: '::1',
syscall: 'connect',
code: 'ECONNREFUSED',
errno: -4078,
path: '/api/charts/2',
_currentUrl: 'http://localhost:5000/api/charts/2',I cannot determine why it is not working, especially since it functions properly in Postman.