400 或 500 级别的 Http 响应

Question

我是 gRPC 的新手。我的程序是用 ‍‍nuxtjs 编写的，是一个简单的 login page，它接收 username 和 password 并使用 gRPC 将其发送到服务器。当我使用 BloomRPC 提交请求时，一切都很好。但是使用浏览器时，请求没有发送到服务器。

我的authclass如下：

// auth.js

export default class {
  constructor(vars) {
    this.tokenKey = vars.tokenKey
    this.proto = vars.proto
    this.client = new vars.proto.AuthenticationClient('http://127.0.0.1:50051', null, null)
  }

  async loginRequest(user) {
    const request = new this.proto.LoginRequest()
    request.setUsername(user.username.trim().toLowerCase())
    request.setPassword(user.password.trim()) 
    return await this.client.login(request, {})    
  } 
}

无论服务器是否启动，用浏览器向服务器请求时都会显示此错误。

net ERROR_CONNECTION_REFUSED
message: 'Http response at 400 or 500 level'
...

Chrome 截图：

我是否必须进行特定配置？

我只是想要一个配置提示。

更新：

This link 说你应该使用 Envoy。但我们为什么需要它？我该如何配置它？

BloomRPC 截图：

正如您在图像右侧看到的那样，答案已正确返回。

Answer 1

根据 chrome 屏幕截图，您尝试访问 JS 中的 5005 端口，但根据 BloomRPC，屏幕截图显示您的服务监听 50051.

Answer 2

问题出在哪里？

问题是请求没有到达服务器。所以服务器是up还是down都无所谓

> 简答：

我需要一个代理来接收来自服务器的请求。所以我用‍envoy proxy. In this way, nginx接收浏览器的请求，然后发送到一个端口（比如5000）。另一方面，envoy监听5000端口，然后在50051端口向服务器运行ning发送请求。

这就是我设计 gRPC 连接跟踪的方式。

> 长答案：

1. 生成 html/css/js 文件并构建 nuxt 项目。我将我的网站文件放在 root/site‍ 文件夹中。

2。 envoy 配置： 我根据documentions grpc-web所说的配置envoy.yaml文件如下。

static_resources:
  listeners:
    - name: listener_0
      address:
        socket_address: { address: 0.0.0.0, port_value: 5000 }
      filter_chains:
        - filters:
            - name: envoy.filters.network.http_connection_manager
              config:
                codec_type: auto
                stat_prefix: ingress_http
                route_config:
                  name: local_route
                  virtual_hosts:
                    - name: local_service
                      domains: ["*"]
                      routes:
                        - match: { prefix: "/" }
                          route:
                            cluster: sample_cluster
                            max_grpc_timeout: 0s
                      cors:
                        allow_origin_string_match:
                          - prefix: "*"
                        allow_methods: GET, PUT, DELETE, POST, OPTIONS
                        allow_headers: keep-alive,user-agent,cache-control,content-type,content-transfer-encoding,x-accept-content-transfer-encoding,x-accept-response-streaming,x-user-agent,x-grpc-web,grpc-timeout
                        max_age: "1728000"
                        expose_headers: grpc-status,grpc-message
                http_filters:
                  - name: envoy.filters.http.grpc_web
                  - name: envoy.filters.http.cors
                  - name: envoy.filters.http.router
  clusters:
    - name: sample_cluster
      connect_timeout: 0.25s
      type: logical_dns
      http2_protocol_options: {}
      lb_policy: round_robin
      hosts: [{ socket_address: { address: 0.0.0.0, port_value: 50051 }}]

这个 yaml 文件有两部分 listeners 和 clusters。在第一部分(listeners)，我们指定监听哪个端口和地址(例如这里是地址0.0.0.0和端口5000)，在第二部分(clusters)，我们告诉它向哪里发送请求(这里是地址 0.0.0.0 和端口 50051)。要使用此文件，我们将其提供给 Docker. So I create a Dockerfile.

# Dockerfile
FROM envoyproxy/envoy:v1.14.3
COPY ./envoy.yaml /etc/envoy/envoy.yaml
EXPOSE 5000
CMD /usr/local/bin/envoy -c /etc/envoy/envoy.yaml

要构建容器，我在 Dockerfile 文件夹中使用以下命令，然后运行它。

docker build -t my-grpc-container:1.0.0 .
docker run -d --net=host my-grpc-container:1.0.0

By executing the above commands, envoy is up and listens to port 5000 and sends requests to port 500051.

有关 envoy 的更多信息，请阅读 this 不错的博客：

The role of Envoy:

Envoy translates the HTTP/1.1 calls produced by the client into HTTP/2 calls that can be handled by those services (gRPC uses HTTP/2 for transport).

3。 nginx 配置：

我进入 /etc/nginx/sites-enabled/ 文件夹并打开 default 文件并设置我的网站文件的路径（见第 1 节）如下：

# server block
root /root/site;

然后告诉nginx，如果url中的一个请求以/rpc/开始，发送到5000端口（那里envoy正在监听):

# server block
location /rpc/ {
    proxy_http_version 1.1;
    proxy_pass http://127.0.0.1:5000/;
    }

然后我重启nginx:

sudo systemctl restart nginx

By doing this part, nginx is up and send requests that start with /rpc/ to port 5000, where envoy is ready to receive.

总结：

服务器运行宁在端口 50051 上。
‍nginx向端口5000发送请求。
envoy，作为 server 和 nginx 之间的接口，接收来自端口 5000 的请求并将它们发送到端口 50051.

完成

400 或 500 级别的 Http 响应

Http response at 400 or 500 level

javascript

django

grpc

nuxt.js

envoyproxy

更新：

问题出在哪里？

> 简答：

> 长答案：