gRPC前端调用时跨域问题怎么解决？

庆芳~ 提问于 2026-03-05 20:50:27 阅读 2

框架

我最近在用 gRPC-Web 做前后端通信，后端是 Go 写的 gRPC 服务，前端用的是 Vue。本地开发时请求一直被浏览器拦截，报 CORS 错误。我已经在后端加了 cors 中间件，但还是不行。是不是前端这边也要配什么？或者我的 HTML 引入方式有问题？

这是我在 index.html 里引入 proto 生成的 js 文件的方式：

<script src="./proto/myService_grpc_web_pb.js"></script>
<script src="./proto/myService_pb.js"></script>
<script>
  const client = new MyServiceClient('http://localhost:8080');
  // 调用方法时报跨域错误
</script>

我来解答赞 3 收藏

反馈

1 条解答

IT人英瑞 Lv1

grpc-web这玩意确实容易在跨域上栽跟头。首先确认你的后端服务启用了grpc-web代理（比如envoy或者nginx），光加cors中间件不够的。

前端这边主要检查三点：
1. 确保grpc-web的content-type是application/grpc-web，而不是普通ajax的application/json。可以这样初始化client：

const client = new MyServiceClient('http://localhost:8080', null, {

  'format': 'text'

});

2. 如果你用的是webpack开发服务器，在vue.config.js里配个代理：

devServer: {

  proxy: {

    '/your-service-path': {

      target: 'http://localhost:8080',

      changeOrigin: true,

      pathRewrite: {'^/your-service-path' : ''},

      ws: true

    }

  }

}

3. 服务端记得设置这几个响应头：
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: content-type, x-grpc-web, x-user-agent

我之前也被这问题折磨了两天，最后发现是envoy配置里漏了allow_methods。grpc-web的坑比restful api多不少，调试的时候多看看浏览器的网络请求详情。

2026-03-05 21:02