1. 定义grpc  proto文件：HelloWorld.proto

syntax = "proto3";

option java_package = "ex.grpc";
option objc_class_prefix = "HSW";

package helloworld;


service Greeter {
  rpc sayHello (HelloRequest) returns (HelloReply) {}

  rpc printAge (printAgeRequest) returns (printAgeReply) {}
}

message HelloRequest {
  string name = 1;
  string city = 2;
}

message HelloReply {
  string message = 1;
}

message printAgeRequest {
  string age = 1;
}

message printAgeReply {
  string text = 1;
}

2. java grpc服务

package com.storehelper.core.grpc;

import com.storehelper.grpc.common.RESPONSE_CODE;
import com.storehelper.grpc.passport.LoginRequest;
import com.storehelper.grpc.passport.LoginResponse;
import com.storehelper.grpc.passport.PassportServiceGrpc;
import com.storehelper.grpc.passport.TokenInfo;
import ex.grpc.GreeterGrpc;
import ex.grpc.HelloWorld;
import io.grpc.Server;
import io.grpc.ServerBuilder;
import io.grpc.stub.StreamObserver;

import java.io.IOException;

public class CalculatorServer {

    public static void main(String[] args) throws IOException, InterruptedException {
        Server server = ServerBuilder.forPort(8082)
                //.addService(new PassportServiceImpl())
                .addService(new GreeterServiceImpl())
                .build();

        server.start();
        System.out.println("Server started at " + server.getPort());
        server.awaitTermination();
    }

    static class PassportServiceImpl extends PassportServiceGrpc.PassportServiceImplBase {
        @Override
        public void login(LoginRequest request, StreamObserver<LoginResponse> responseObserver) {
            LoginResponse response = null;
            response = LoginResponse.newBuilder()
                    .setCode(RESPONSE_CODE.SUCCESS)
                    .setMessage("登录成功")
                    .build();
            responseObserver.onNext(response);

            responseObserver.onCompleted();
        }
    }

    static class GreeterServiceImpl extends GreeterGrpc.GreeterImplBase{
        @Override
        public void sayHello(HelloWorld.HelloRequest request, StreamObserver<HelloWorld.HelloReply> responseObserver) {
            HelloWorld.HelloReply response = HelloWorld.HelloReply.newBuilder().setMessage("111").build();
            responseObserver.onNext(response);

            responseObserver.onCompleted();
        }

        @Override
        public void printAge(HelloWorld.printAgeRequest request, StreamObserver<HelloWorld.printAgeReply> responseObserver) {
            super.printAge(request, responseObserver);
        }
    }
}

3. grpc-web js生成

protoc   --js_out=import_style=commonjs:./src/protoc  --grpc-web_out=import_style=commonjs,mode=grpcweb:./src/protoc -I=src\protoc\     .\src\protoc\HelloWorld.proto

或者 ts生成

protoc   --js_out=import_style=commonjs:./src/protoc  --grpc-web_out=import_style=typescript,mode=grpcweb:./src/protoc -I=src\protoc\     .\src\protoc\HelloWorld.proto

4. grpc-web代码

<script>
import {
  GreeterClient
} from '@/protoc/HelloWorld_grpc_web_pb.js';
import { HelloRequest } from '@/protoc/HelloWorld_pb.js';



const client = new GreeterClient('http://localhost:8081/');

const helloRequest = new HelloRequest();
helloRequest.setCity('北京');
helloRequest.setName("11");
 
const metadata = {"Content-Type": "aplication/grpc"};//aplication/grpc

console.log(111111111111);
client.sayHello(helloRequest, metadata, (err, response) => {
  console.log(22222222);
  console.log(err, response);
  console.log(response.getMessage());
});
</script>

5.grpc-web代理：nginx

location / {
      
		
		  # 重点！！需要将Content-Type更改为 application/grpc
    # grpc-web过来的是application/grpc-web+proto || application/grpc-web+text (取决于生成js代码时grpc-web_out 的mode选项，本文用grpcweb 则为application/grpc-web+proto)
    grpc_set_header Content-Type application/grpc;
    grpc_pass localhost:8082;
    # 因浏览器有跨域限制，这里直接在nginx支持跨域
    if ($request_method = 'OPTIONS') {
      add_header 'Access-Control-Allow-Origin' '*';
      add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
      add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Transfer-Encoding,Custom-Header-1,X-Accept-Content-Transfer-Encoding,X-Accept-Response-Streaming,X-User-Agent,X-Grpc-Web';
      add_header 'Access-Control-Max-Age' 1728000;
      add_header 'Content-Type' 'text/plain charset=UTF-8';
      add_header 'Content-Length' 0;
      return 204;
    }

    if ($request_method = 'POST') {
      add_header 'Access-Control-Allow-Origin' '*';
      add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
      add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Transfer-Encoding,Custom-Header-1,X-Accept-Content-Transfer-Encoding,X-Accept-Response-Streaming,X-User-Agent,X-Grpc-Web';
      add_header 'Access-Control-Expose-Headers' 'Content-Transfer-Encoding, grpc-message,grpc-status';
    }
  }

参考文档：

https://segmentfault.com/a/1190000022022271