Angular中使用Fetch调用API遇响应为空问题求助

首先，你的问题主要来自两个核心点：fetch的mode: 'no-cors'配置，以及服务器端的请求校验逻辑。

1. mode: 'no-cors'导致无法读取响应内容 #

你在fetch配置里设置了mode: 'no-cors'，这会让浏览器生成opaque响应（也就是你调试时看到的status: 0、body: null的状态）。这种响应是浏览器为跨域安全限制生成的特殊响应，哪怕服务器实际返回了有效数据，你也完全无法读取响应的body或其他详细信息——这直接违背了你调用API获取数据的初衷。

所以第一步必须删掉这个配置：

getLastReviews() { 
  return fetch(ApiService.url, { 
    headers: { 
      // 注意：GET请求不需要Content-Type头，后面会解释原因
      // 'Content-Type': 'application/json', 
    }, 
    method: 'GET', 
    // 移除mode: 'no-cors'，默认就是cors模式
  }) 
}

2. 浏览器地址栏访问返回空，但Postman正常的原因 #

Postman和浏览器地址栏发送的请求有本质差异：

• Postman是桌面客户端，不受浏览器同源策略限制，且默认发送的请求头和浏览器原生请求不同；
• 浏览器地址栏发送的是最基础的GET请求，没有任何自定义头，而你的服务器可能做了请求头校验（比如检查Origin、X-Requested-With等），当检测到是浏览器直接访问时，就返回空响应。

另外，你给GET请求添加Content-Type: application/json头是不合理的——GET请求没有请求体，这个头通常用于POST/PUT等带请求体的请求，服务器可能因为这个不合法的头直接返回异常内容。

下一步解决建议 #

1. 清理不合理的fetch配置：去掉mode: 'no-cors'和GET请求里的Content-Type头，参考上面的代码示例。
2. 配置服务器CORS规则：去掉no-cors后，浏览器会发送跨域预检请求（OPTIONS），你需要在服务器端添加Access-Control-Allow-Origin等响应头，允许你的前端域名访问API。
3. 检查服务器请求校验逻辑：查看服务器是否有判断请求是否为AJAX的逻辑（比如检查X-Requested-With: XMLHttpRequest头），如果有，可以在fetch中添加这个头模拟AJAX请求：

getLastReviews() { 
  return fetch(ApiService.url, { 
    headers: { 
      'X-Requested-With': 'XMLHttpRequest',
    }, 
    method: 'GET', 
  }) 
}

最后，建议打开浏览器开发者工具的Network面板，查看实际发送的请求头和服务器返回的响应头，这能帮你更快定位剩余问题。

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