grpc-web如何获取响应头？React应用中无法获取权限错误响应头

问题本质 #

你遇到的问题由两个核心原因导致：

1. CORS限制：浏览器默认仅允许JS读取CORS安全列表内的响应头，Grpc-Message属于自定义头，若服务器未显式声明暴露，前端代码无法获取——这就是Chrome能看到头但err.metadata里没有的原因。
2. grpc响应不规范：Error: Response closed without grpc-status (Headers only)说明服务器只返回了自定义错误头，未附带标准的grpc-status状态码，导致grpc-web客户端无法解析完整的错误元数据。

解决方案 #

1. 服务器端配置CORS，暴露grpc相关头 #

在服务器的CORS配置中添加Access-Control-Expose-Headers响应头，明确声明需要暴露的grpc自定义头：

Access-Control-Expose-Headers: grpc-status,grpc-message,grpc-details-bin

（注：头名称通常用小写，与浏览器显示的Grpc-Message大小写不敏感，配置时用小写更规范）

以Nginx为例，配置示例：

add_header Access-Control-Expose-Headers "grpc-status,grpc-message,grpc-details-bin";

若为后端代码（如Go、Java），直接在响应头中设置该字段即可。

2. 服务器端返回标准grpc状态码 #

服务器返回权限错误时，必须同时设置grpc-status为对应标准码（比如权限拒绝对应状态码7），不能仅返回Grpc-Message头。只有符合grpc规范的响应，客户端才能正确解析并将完整元数据传递到err.metadata中。

3. 客户端调整错误处理（可选） #

若服务器配置正确但回调仍无法获取完整头，可尝试改用Promise风格调用，查看是否能拿到更完整的错误信息：

getCurrent(callback: (user: User | null, err: ServiceError | null) => void) {
  const request = new Empty();
  const client = new UserServiceClient(Config.beUrl);

  client.getMyself(request, getGRPCMetadata())
    .then(res => {
      const user = mapResponse(userMapping)(res);
      callback(user, null);
    })
    .catch(err => {
      console.log('完整错误信息:', err);
      console.log('错误元数据:', err.metadata);
      callback(null, err);
    });
}

内容的提问来源于stack exchange，提问作者Axel Productions 86