I wonder why there are different results from errors when I use express, axios, and cors - node.js

Question

When i'm crawling to my college site of one part, there is error.
Failed to load resource: net::ERR_CONNECTION_REFUSED (localhost:3000/:1)
createError.js:16 Uncaught (in promise) Error: Network Error
at createError (createError.js:16)
at XMLHttpRequest.handleError (xhr.js:99)
I've tried other things but I'm not sure why it is getting shows 'Load...' and in the console there is error.
The site is working but crawling is not working properly and showing 'Load...'
this is kangnam.js :
const axios = require('axios');
const cheerio = require('cheerio');
const log = console.log;
const express = require("express");
const cors = require("cors");
const PORT = 4000;
const app = express();
app.use(cors());
const getHTML = async () => {
try {
return await axios.get('https://web.kangnam.ac.kr', {
headers: {
Accept: 'text/html'
}
});
} catch (error) {
console.log(error);
}
};
app.get("/", (req, res) => {
getHTML()
.then(html => {
const $ = cheerio.load(html.data);
const $allNotices = $("ul.tab_listl div.list_txt");
let resultArr = [];
$allNotices.each(function(idx, element) {
let itemObj = {
title : $(this).children('a').attr('title'),
url : $(this).children('a').attr('href'),
};
resultArr.push(itemObj);
});
resultArr.forEach((element) => {
console.log(`현재 ${element._title}의 현황 : ${element._url}`);
});
return resultArr;
// const data = ulList.filter(n => n.title);
// return data;
}). then((data) => res.send(data));
});
app.listen(PORT, () =>
console.log(`Example app listening at http://localhost:${PORT}`)
);
this is NoticesList.js :
import React, {useEffect, useState} from 'react';
import styled from 'styled-components';
import NoticesItem from './NoticesItem';
import axios from "axios";
const NoticesListBlock = styled.div`
box-sizing: border-box;
padding-bottom: 3rem;
width: 768px;
margin: 0 auto;
margin-top: 2rem;
`;
const sampleArticle = {
title: 'title',
url: 'https://google.com',
};
const NoticesList = () => {
const [data, setData] = useState(null);
useEffect(() => {
const getData = async() => {
const datas = await axios.get("http://localhost:3000/");
setData(datas.data);
};
getData();
}, []);
useEffect(() => {
console.log(data);
}, [data]);
if(data === null){
return <div>Load....</div>;
}else{
console.log(data);
return (
<div>
{data.map((ele) => (
<>
<div>
{ele.title};
</div>
<br/>
</>
))}
</div>
);
};
};
export default NoticesList;
this is NoticesItem.js :
import React from 'react';
import styled from 'styled-components';
const NoticesItemBlock = styled.div`
display: flex;
.contents {
h6 {
margin: 15px;
a {
color: black;
}
}
}
& + & {
margin-top: 1.5rem;
}
`;
const NoticesItem = ({ article }) => {
const { title, url } = article;
return (
<NoticesItemBlock>
<div className="contents">
<h6>
<a href={url} target="_blank" rel="noopener noreferrer">
{title}
</a>
</h6>
</div>
</NoticesItemBlock>
);
};
export default NoticesItem;

Answer 1

try deploying an API on goormide, just change the last part of kangnam.js for:
app.listen(3000, function() {
console.log('Server listening on port 3000');
});
this will give a link like: https://server-clgoz.run-eu-central1.goorm.io/
wich you will use instead of: http://localhost:4000/
on NoticesList.js
Also in this file you can set a variable like:
const site="https://web.kangnam.ac.kr/";
and then in the map function:
<a href={site+decodeURIComponent(ele.url.slice(17))}>{ele.title}</a>
this will give the links to the site.
Good luck :) !!!