在Express+EJS项目中客户端使用fetch调用第三方接口报错如何解决

云上老周

2026-10-7

错误原因

你把fetch逻辑写在了EJS的<% %>标签中，这部分代码属于服务端执行代码，会在Express渲染HTML的阶段在Node.js环境运行，而Node.js默认没有浏览器提供的全局fetch API，因此抛出fetch is not defined错误。
此外你的需求是让客户端浏览器发送请求，完全不需要让fetch在服务端运行。

正确实现方案

方案1：客户端执行fetch（符合你的原始需求）

把fetch逻辑放到HTML的<script>标签中，仅用EJS注入服务端传递的动态参数即可，示例代码如下：
EJS文件代码：

<!-- 以下是客户端执行的JS代码，EJS仅负责渲染动态的name参数 -->
<script>
fetch(`你的第三方API请求地址/<%= name[0] %>`)
  .then(response => response.json())
  .then(responseData => {
    // 这里写你拿到响应后的客户端逻辑，比如把内容插入页面
    console.log(responseData)
    // 示例：把响应输出到页面
    document.querySelector('#result').textContent = JSON.stringify(responseData, null, 2)
  })
</script>

<!-- 用来展示结果的容器 -->
<div id="result"></div>

你的app.js渲染逻辑不需要修改，保持原样即可：

res.render("index",{name:["jon","donald","jo"]})

方案2：服务端请求API再渲染结果（若不需要客户端发请求可选用）

如果你希望请求在服务端完成，直接把结果渲染到HTML返回给客户端，可以在服务端引入兼容Node.js的fetch库发起请求：

先安装依赖：

npm i node-fetch@2

修改app.js逻辑：

const fetch = require('node-fetch')

// 你的路由逻辑
app.get('/', async (req, res) => {
  const name = ["jon","donald","jo"]
  // 服务端发起请求
  const apiResponse = await fetch(`你的第三方API请求地址/${name[0]}`)
  const responseData = await apiResponse.json()
  // 把结果传给模板渲染
  res.render("index", { name, response: responseData })
})