Vue CLI调用Express服务器Fetch请求异常：请求对象为空且控制台无输出

核心问题出在你设置的mode: 'no-cors'上——这个模式会让浏览器返回一个不透明响应（opaque response），你无法读取响应的任何内容，包括响应体、状态码，所以控制台输出的都是空的无效内容。

修正步骤： #

• 直接移除{ mode: 'no-cors' }配置，既然你已经修复了CORS问题，就不需要这个限制模式了。
• 用Fetch API自带的response.json()方法解析JSON响应，不要手动转字符串再解析，因为await response得到的是Response对象，不是响应体内容。
• 加上错误处理逻辑，方便排查请求过程中可能出现的问题。

修正后的代码： #

methods: {
async getInfo () {
  try {
    const response = await fetch('https://ksjkfsjdbnfksjfksjf744.netlify.app/.netlify/functions/api/demo')
    // 检查请求是否成功（状态码200-299）
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`)
    }
    const responseObject = await response.json()
    console.log('响应数据：', responseObject)
  } catch (error) {
    console.error('请求出错：', error)
  }
}
}

关键说明： #

• no-cors模式仅适用于不需要读取响应的场景（比如上报统计数据），它会完全限制脚本对响应的访问权限，这就是你拿不到数据的根本原因。
• response.json()会自动将响应体解析为JSON对象，比手动JSON.parse(JSON.stringify(response))更高效且不易出错。
• 加入try/catch和response.ok检查，能帮你快速定位网络错误、服务器错误等问题，避免控制台毫无输出的情况。

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