JavaScript调用Fetch GET接口Postman正常但控制台无数据输出怎么解决

问题核心原因 #

Postman不受浏览器同源策略约束，因此可以正常获取响应，浏览器环境下无法拿到数据，绝大多数是CORS跨源资源共享限制导致，具体触发逻辑：

• 你的请求携带了自定义Authorization请求头，且GET请求额外添加了Content-Type: application/json字段，不符合浏览器简单请求判定规则，会自动先发送OPTIONS预检请求验证服务端是否允许该跨源请求
• 目标接口服务端未正确配置CORS规则，没有允许跨源访问、没有放行你携带的自定义请求头，也没有处理OPTIONS预检请求，导致浏览器直接拦截响应，不会把返回内容交给前端代码

排查步骤 #

1. 打开浏览器开发者工具（按下F12），切换到「控制台」标签，查看是否有包含CORS、Access-Control-Allow-Origin关键字的报错，先确认是否为跨域问题
2. 切换到「网络」标签，刷新页面重发请求，查看是否存在请求方法为OPTIONS的同名接口请求：
   • 如果OPTIONS请求返回4xx/5xx状态码，说明服务端没有处理预检请求
   • 如果OPTIONS请求正常返回，但响应头没有正确的CORS相关字段，说明服务端CORS配置不匹配
3. 先注释掉请求头里的Content-Type: application/json字段（GET请求没有请求体，不需要声明请求体格式，属于多余配置），再次测试请求是否正常，排除多余请求头触发的额外限制
4. 如果排除跨域问题后仍报错，修改请求处理代码，先打印原始响应内容，排查是否是返回内容不符合JSON格式：

fetch('https://amlocatapi.us-south.cf.appdomain.cloud/location',
{
  method:'GET',
  headers:{
    'Authorization':'1q2w3e4r5t6yu7i8'
  }
}
).then(response => {
  console.log('响应状态码：', response.status)
  return response.text()
})
.then(rawText => {
  console.log('原始响应内容：', rawText)
  // 尝试手动转JSON
  try {
    const jsonData = JSON.parse(rawText)
    console.log('解析成功的JSON数据：', jsonData)
  } catch (parseErr) {
    console.error('JSON解析失败：', parseErr)
  }
})
.catch(err => console.error('请求链路报错：', err))

解决方案 #

服务端修改（推荐，永久生效） #

在接口服务端添加CORS配置，满足以下要求：

• 配置允许的请求来源域，返回Access-Control-Allow-Origin响应头，值为你前端页面的域名（本地测试可以临时设为*，线上不推荐）
• 允许的请求方法配置GET和OPTIONS，返回Access-Control-Allow-Methods: GET, OPTIONS
• 允许的请求头配置Authorization，返回Access-Control-Allow-Headers: Authorization
• 针对OPTIONS预检请求直接返回200/204状态码，不需要走业务逻辑处理

本地开发临时绕过方案 #

如果是本地开发阶段暂时无法修改服务端，可以用以下方式绕过跨域限制：

• 配置前端开发服务的代理转发，比如webpack/vite的devServer代理、nginx反向代理，让接口请求和前端页面同源，避开跨域校验
• 安装浏览器跨域插件，临时关闭浏览器同源安全策略（仅用于本地测试，不可用于线上环境）

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