使用Express、Axios、CORS爬取高校站点前端报连接拒绝错误如何解决

错误原因 #

• 端口配置不匹配：后端Express服务绑定的端口是4000，但前端Axios请求的地址是http://localhost:3000/，端口不一致导致请求被拒绝，抛出ERR_CONNECTION_REFUSED错误。
• 前端请求未做异常捕获：异步请求没有加try/catch逻辑，请求失败时会抛出未捕获的Promise异常。
• 后端代码存在隐性问题：打印日志时错误使用了不存在的_title、_url属性（实际定义的是title、url），日志会输出undefined；请求目标站点未添加UA标识，可能触发站点反爬策略导致请求失败。
• 公告链接可能存在相对路径问题：爬取到的url如果是站点内部相对路径，前端直接访问会跳转失败。

修复方案 #

1. 统一端口配置
   将前端NoticesList.js中的请求地址修改为和后端一致的端口：

// 原来的代码
const datas = await axios.get("http://localhost:3000/");
// 修改为
const datas = await axios.get("http://localhost:4000/");

也可以将后端kangnam.js中的PORT变量值改为3000，两边保持一致即可。

2. 增加前端请求异常捕获
   修改前端的getData方法，添加错误处理逻辑：

const getData = async() => {
  try {
    const datas = await axios.get("http://localhost:4000/");
    setData(datas.data);
  } catch (error) {
    console.error('公告数据请求失败：', error);
    // 可自定义失败兜底逻辑，比如设置空数组、展示错误提示等
    setData([]);
  }
};

3. 修复后端代码问题

• 修正日志打印的属性名：

// 原来的代码
console.log(`현재 ${element._title}의 현황 : ${element._url}`);
// 修改为
console.log(`현재 ${element.title}의 현황 : ${element.url}`);

• 给目标站点请求添加UA标识和超时配置，避免被反爬拦截：

return await axios.get('https://web.kangnam.ac.kr', {
  headers: {
    Accept: 'text/html',
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'
  },
  timeout: 10000
});

4. 补全公告链接的域名前缀
   如果爬取到的href是相对路径，需要拼接目标站点域名后再返回：

let itemObj = {
  title : $(this).children('a').attr('title'),
  url : `https://web.kangnam.ac.kr${$(this).children('a').attr('href')}`,
};

内容的提问来源于stack exchange，提问作者박종준