如何使用fetch从Express服务器获取JSON数据？

数据老陈

2026-9-28

常见问题及解决方法

跨域CORS配置缺失（最高发问题）
浏览器默认会拦截不同源地址的请求，前端页面地址和Express服务地址的域名/端口/协议只要有一个不一致就会触发跨域限制，可通过以下两种方式修复：
方案1：使用cors中间件
先安装依赖：

npm install cors

然后在Express代码中引入并启用：

const cors = require('cors')
// 所有接口都允许跨域
app.use(cors())

app.get('/api/example', function(req, res){
    res.json({ text: 'This is what you should get if this works' });
});

方案2：手动配置跨域响应头

app.get('/api/example', function(req, res){
    // 允许所有来源请求，生产环境建议替换为你的前端实际地址
    res.header("Access-Control-Allow-Origin", "*")
    res.json({ text: 'This is what you should get if this works' });
});

Fetch代码缺少错误判断，无法定位具体问题
现有Fetch代码只会在网络请求完全失败时抛出异常，接口返回4xx/5xx错误时会继续执行json解析，反而会抛出格式错误，建议修改代码增加错误捕获，先定位具体报错：

fetch("https://myexpressserver.com/api/example")
  .then(response=> {
      // 先判断响应是否正常
      if(!response.ok) {
          throw new Error(`接口报错，状态码：${response.status}`)
      }
      return response.json()
  })
  .then(data=> {
      console.log(data.text);
  })
  // 增加错误捕获，打印具体问题
  .catch(err => {
      console.error('请求失败原因：', err)
  })

服务端基础配置问题
确认以下基础配置是否正确：
1. Express服务已正常启动，监听的端口和你请求地址的端口一致，比如服务监听3000端口，请求地址应该是http://localhost:3000/api/example而非自定义域名
2. 接口路径没有重复前缀，比如你如果配置了app.use('/api', xxxRouter)，那路由里只需写app.get('/example')即可，重复写/api/example会导致实际接口地址变成/api/api/example
3. 没有其他全局中间件拦截了该请求，比如权限校验、路由拦截中间件会提前返回错误响应