如何用gRPC-Web调用Code First模式protobuf-net的gRPC服务并生成JS客户端

一、服务端配置（开启gRPC-Web支持） #

• 给你的ASP.NET Core gRPC项目安装Grpc.AspNetCore.Web NuGet包
• 在Program.cs里按顺序添加配置：

var builder = WebApplication.CreateBuilder(args);

// 注册gRPC服务
builder.Services.AddGrpc();

// 配置CORS（gRPC-Web需要暴露特定响应头）
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowGrpcWeb", policy =>
    {
        policy.AllowAnyOrigin()
              .AllowAnyMethod()
              .AllowAnyHeader()
              .WithExposedHeaders("Grpc-Status", "Grpc-Message", "Grpc-Encoding", "Grpc-Accept-Encoding");
    });
});

var app = builder.Build();

// 启用CORS
app.UseCors("AllowGrpcWeb");

// 启用gRPC-Web中间件，需放在路由和端点映射之间
app.UseGrpcWeb(new GrpcWebOptions { DefaultEnabled = true });

// 映射你的gRPC服务实现类
app.MapGrpcService<YourActualGrpcService>();

app.Run();

二、无.proto文件生成gRPC JavaScript客户端代码 #

protobuf-net Code First用C#属性定义契约，没有手动编写.proto，需要先从C#代码导出.proto，再生成JS客户端：

步骤1：从Code First代码导出.proto文件 #

• 给gRPC服务项目安装protobuf-net.Reflection NuGet包
• 编写简单工具代码导出.proto：

using ProtoBuf.Reflection;
using System.IO;

// 替换成你自己的请求、响应消息类和gRPC服务类
var schema = RuntimeTypeModel.Default.GetSchema(
    typeof(YourRequestDto),
    typeof(YourResponseDto),
    typeof(YourGrpcService)
);
File.WriteAllText("your-service.proto", schema);

运行这段代码，就能得到包含所有消息定义和服务方法的.proto文件。

步骤2：生成JS客户端代码 #

• 全局安装grpc-tools：npm install -g grpc-tools
• 执行命令生成代码，替换成你的.proto路径和输出目录：

grpc_tools_node_protoc \
  --js_out=import_style=commonjs,binary:./client/src/proto \
  --grpc-web_out=import_style=commonjs,mode=grpcwebtext:./client/src/proto \
  your-service.proto

• 生成文件说明：
  • your-service_pb.js：包含所有消息类型的JS定义
  • your-service_grpc_web_pb.js：包含gRPC-Web客户端类，直接用于调用服务

三、JavaScript端调用示例 #

• 安装gRPC-Web依赖：npm install grpc-web
• 在JS代码中导入生成的文件并调用服务：

const { YourRequestDto } = require('./proto/your-service_pb.js');
const { YourGrpcServiceClient } = require('./proto/your-service_grpc_web_pb.js');

// 创建客户端实例，填入你的服务端地址
const client = new YourGrpcServiceClient('http://localhost:5000');

// 构造请求消息
const request = new YourRequestDto();
request.setYourFieldName('Hello from JavaScript');

// 回调风格调用
client.yourRpcMethod(request, {}, (err, response) => {
  if (err) {
    console.error('调用失败:', err);
    return;
  }
  console.log('服务响应:', response.getYourResultField());
});

// Promise风格调用（可选）
client.yourRpcMethod(request, {})
  .then(response => console.log('服务响应:', response.getYourResultField()))
  .catch(err => console.error('调用失败:', err));

内容的提问来源于stack exchange，提问作者last-Programmer