Angular调用ASP.NET Core gRPC服务遇CORS缺失指定头问题

你碰到的是两个问题叠加导致的：

• CORS策略未配置：ASP.NET Core服务器没有允许来自localhost:4200的跨域请求，所以浏览器拦截了响应
• gRPC-web支持缺失：浏览器无法直接调用原生gRPC服务，必须通过gRPC-web协议转发，同时请求路径不匹配引发了404错误

1. 配置ASP.NET Core的CORS与gRPC-web支持 #

在Program.cs中添加以下配置，先处理CORS再启用gRPC服务：

var builder = WebApplication.CreateBuilder(args);

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

// 配置CORS策略，适配gRPC-web的要求
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAngular", policy =>
    {
        policy.WithOrigins("http://localhost:4200") // 你的Angular客户端地址
              .AllowAnyHeader()
              .AllowAnyMethod()
              .AllowCredentials()
              // 暴露gRPC-web需要的响应头
              .WithExposedHeaders("Grpc-Status", "Grpc-Message", "Grpc-Encoding", "Grpc-Accept-Encoding");
    });
});

var app = builder.Build();

// 先启用CORS，顺序不能错
app.UseCors("AllowAngular");

// 映射gRPC服务并启用gRPC-web支持
app.MapGrpcService<TourService>().EnableGrpcWeb();

app.Run();

2. 配置Angular客户端使用gRPC-web协议 #

@ngx-grpc需要明确启用gRPC-web传输，在你的gRPC模块（比如grpc.module.ts）中添加配置：

import { NgModule } from '@angular/core';
import { GrpcCoreModule, GrpcWebClientFactory } from '@ngx-grpc/core';
import { GRPC_WEB_CLIENT_FACTORY } from '@ngx-grpc/common';

@NgModule({
  imports: [
    GrpcCoreModule.forRoot({
      settings: {
        host: 'https://server-address', // 替换为你的gRPC服务器地址
      },
    }),
  ],
  providers: [
    // 指定使用gRPC-web客户端工厂
    { provide: GRPC_WEB_CLIENT_FACTORY, useClass: GrpcWebClientFactory },
  ],
})
export class GrpcModule {}

3. 检查请求路径匹配 #

错误中的请求路径是https://server-address/Service/GetAll，但gRPC的标准路径格式是/proto包名.服务名/方法名。比如你的proto定义如果是：

package tour;

service TourService {
  rpc GetAll(Empty) returns (stream Tour);
}

正确路径应该是/tour.TourService/GetAll。可以通过浏览器开发者工具查看实际请求地址，确认是否和服务器端的gRPC服务路径一致，路径不匹配会直接导致404。

4. 验证服务器gRPC-web启用状态 #

务必确保ASP.NET Core中调用了.EnableGrpcWeb()，没有这个配置的话，服务器无法识别gRPC-web请求，同样会返回404。

先搞定ASP.NET Core的CORS和gRPC-web配置，再确认客户端的gRPC-web传输设置和请求路径正确性，就能解决CORS拦截和404的问题。

内容的提问来源于stack exchange，提问作者mr-dortaj