Express如何从服务端向客户端传数据及fetch无返回问题排查

问题原因说明 #

你关于URL中//被识别为注释的猜测不成立：被单引号包裹的URL属于字符串字面量，内部内容不会被JavaScript解析为代码注释，不会影响请求正常发起。
你遇到的问题实际由以下几个错误导致：

• fetch返回的是Response响应对象，无法直接读取返回的JSON字段，需要先调用await res.json()方法将响应体解析为JSON格式
• 遍历数组usersName时错误使用了for...in语法，该语法会遍历数组的索引而非数组元素，应该使用for...of遍历数组内容
• 代码存在变量名错误：你创建的DOM节点变量名为userDiv，调用append时错误写为div，会触发变量未定义报错，导致渲染逻辑终止
• 若前端页面没有部署在http://localhost:3000域名下，会触发跨域资源共享(CORS)限制，导致请求被浏览器拦截

修复后的前端代码 #

<!DOCTYPE HTML>
<html lang="en">
<head>
</head>
<body>
<div class="page">
</div>
<style>
    html,
    body,
    .page {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .page {
        display: grid;
        grid-template-columns: repeat(5, auto);
        grid-template-rows: repeat(auto, auto);
    }
</style>
<script>
    const name = localStorage['name']
    async function getUsers() {
        const page = document.querySelector('.page')
        const res = await fetch('http://localhost:3000/api/users')
        // 新增响应体JSON解析步骤
        const data = await res.json()
        console.log(data)
        // 改用for...of遍历数组元素
        for(const name of data.usersName) {
            let userDiv = document.createElement('div')
            userDiv.innerHTML = name
            userDiv.style.textAlign = "center"
            // 修正变量名错误
            page.append(userDiv)
        }
    }
    getUsers()
</script>
 </body>
 </html>

额外排查建议 #

• 打开浏览器开发者工具的控制台(Console)面板，可直接查看代码报错信息定位问题
• 如果确认存在跨域问题，可通过Express服务端引入cors中间件解决：
  1. 执行npm install cors安装依赖
  2. 在Express服务端代码的路由定义前添加如下代码：

  const cors = require('cors')
  app.use(cors())
  

• 打开开发者工具的网络(Network)面板，可确认/api/users请求是否正常发起，响应状态码是否为200，响应体内容是否符合预期

内容的提问来源于stack exchange，提问作者YassBan