.NET中的gRPC-Web是什么？如何让浏览器应用调用gRPC服务？-C#.Net教程-PHP中文网

.NET中的gRPC-Web是什么？如何让浏览器应用调用gRPC服务？

幻夢星雲

发布： 2025-11-19 03:19:17

原创

262人浏览过

gRPC-Web是为浏览器设计的gRPC变体，通过HTTP/1.1封装调用，需在.NET中启用gRPC-Web中间件、生成前端stub并配置CORS，支持一元和客户端流式调用。

.net中的grpc-web是什么？如何让浏览器应用调用grpc服务？

gRPC-Web 是 gRPC 的一种变体，专为浏览器环境设计。标准的 gRPC 使用 HTTP/2 的双向流和多路复用特性，但大多数浏览器不支持直接使用 HTTP/2 发起 gRPC 调用，因此无法在前端 JavaScript 中直接调用原生 gRPC 服务。gRPC-Web 就是为了解决这个问题而诞生的。

什么是 gRPC-Web？

gRPC-Web 是一个允许浏览器应用通过 JavaScript 或 TypeScript 调用 gRPC 服务的协议。它在客户端使用普通的 HTTP 请求（通常是 HTTP/1.1），将 gRPC 调用封装成兼容 Web 的格式。由于浏览器安全策略和网络栈的限制，gRPC-Web 并不支持所有 gRPC 功能，比如服务器流式响应在某些模式下受限，但支持一元调用（unary call）和客户端流。

关键点：

gRPC-Web 不是直接运行在 HTTP/2 上，而是通过代理转换请求
需要后端部署一个 gRPC-Web 兼容的代理或启用支持中间件
前端使用生成的客户端 stub 调用服务，就像调用普通 API 一样

如何让浏览器应用调用 gRPC 服务？

要在 .NET 环境中实现浏览器调用 gRPC 服务，需完成以下步骤：

1. 在服务端启用 gRPC-Web 支持

如果你使用的是 ASP.NET Core gRPC 服务，可以通过添加中间件来支持 gRPC-Web。从 .NET 5 开始，官方提供了对 gRPC-Web 的支持。

在 Program.cs 中配置：

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddGrpc();

var app = builder.Build();

app.UseRouting();

// 启用 gRPC-Web 中间件
app.UseGrpcWeb(new GrpcWebOptions { DefaultEnabled = true });

// 映射你的 gRPC 服务
app.MapGrpcService<YourGrpcService>();

app.Run();

登录后复制

这样，gRPC 服务就可以接受来自浏览器的 gRPC-Web 请求了。

2. 前端使用 gRPC-Web 客户端库

在浏览器端，不能使用原生 gRPC 客户端，必须使用 gRPC-Web 提供的 JavaScript 客户端。推荐使用 grpc-web npm 包。

安装：

Eclipse中创建Web Maven Project并部署到Tomcat中中文WORD版

大家都知道，在进行J2EE项目的开发过程中，在调试阶段如果只是修改了页面是不需要重启应用服务器的，比如不需要重启Tomcat。只需要在浏览器中进行页面刷新即可。其实之所以不用重启Tomcat等应用服务器，其根本原因是因为我们可以在应用服务器的配置文件中设置虚拟目录，这样就可以知道web 项目所在的目录，于是就可以省去打包、然后再重新发布到服务器的步骤。感兴趣的朋友可以过来看看

查看详情

npm install grpc-web google-protobuf

登录后复制

然后使用 protoc 和插件生成前端可用的客户端代码：

protoc --js_out=import_style=commonjs,binary:. \
       --grpc-web_out=import_style=commonjs,mode=grpcwebtext:. \
       your_service.proto

登录后复制

这会生成 YourServiceClient.js 和消息类文件。

3. 在前端代码中调用服务

示例（TypeScript 或 JavaScript）：

import { YourServiceClient } from './generated/YourServiceClient';
import { YourRequest } from './generated/YourRequest';
import { YourResponse } from './generated/YourResponse';

const client = new YourServiceClient('https://localhost:7001');

const request = new YourRequest();
request.setName('Alice');

client.yourMethod(request, {}, (err, response: YourResponse) => {
  if (err) {
    console.error(err);
    return;
  }
  console.log(response.getMessage());
});

登录后复制

注意：URL 指向的是启用 gRPC-Web 的 ASP.NET Core 服务地址。

4. 处理跨域问题（CORS）

如果前端和 gRPC 服务不在同一域名下，需要配置 CORS：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAll", policy =>
    {
        policy.AllowAnyOrigin()
              .AllowAnyHeader()
              .AllowAnyMethod();
    });
});

// 在 UseRouting 之后启用 CORS
app.UseCors("AllowAll");

登录后复制