javascript - 400 或 500 级别的 Http 响应

标签 javascript django nuxt.js grpc envoyproxy

我是 gRPC 的新手。我的程序是用 ‍‍ nuxtjs 编写的是一个简单的login page接收 usernamepassword并使用 gRPC 将其发送到服务器。
当我使用 BloomRPC 提交请求时,一切都很好.但是在使用浏览器时,请求并没有发送到服务器。
我的 auth类如下:

// 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 截图:
Chrome Screenshot
我必须做一个特定的配置吗?
我只是想要一个配置提示。
更新:
This link说你应该使用 Envoy。但我们为什么需要它?以及如何配置它?
BloomRPC 截图:
正如您在图像右侧看到的那样,正确返回了答案。
bloomrpc screenshot

最佳答案

问题出在哪里?
问题是请求没有到达服务器。所以无论服务器是启动还是关闭都没有关系。
> 简短回答:
我需要一个代理来接收来自服务器的请求。所以我用了‍envoy proxy .这样,nginx收到来自浏览器的请求,然后将其发送到端口(例如 5000)。另一方面,envoy监听端口 5000,然后将请求发送到在端口 50051 上运行的服务器。
这就是我设计跟踪 gRPC 的方式联系。
gRPC traking a request

> 长答案:
1. 生成带有建筑的html/css/js文件nuxt项目。
我把我的网站文件放在 root/site‍文件夹。
2. envoy配置:
我配置envoy.yaml根据documentions 文件如下grpc-web说。

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文件有两个部分listenersclusters .在第一部分(listeners)中,我们指定监听的端口和地址(例如,这里是地址 0.0.0.0 和端口 5000),在第二部分(clusters)中,我们告诉它发送到哪里请求(这里是地址 0.0.0.0 和端口 50051)。要使用此文件,我们将其提供给 Docker .所以我创建了一个 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 之间的接口(interface)和 nginx , 收到
    来自端口 5000 的请求并将它们发送到端口 50051。

  • 完毕

    关于javascript - 400 或 500 级别的 Http 响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70393465/

    相关文章:

    javascript - 选择页面上新创建的元素 - puppeteer

    javascript - 使用 AJAX 加载的 iframe 代码未加载

    django - 在模板中呈现标记 'sass_src' 时无法定位文件

    javascript - Nuxt 抛出 'The "path"argument must be of type string' or console spam

    javascript - 无法在 nuxt 中使用 axios 插件

    nuxt.js - 如何通过cypress拦截服务器端api调用

    php - 如何检查一个对象是否为空?

    javascript - 重新排序项目算法

    python - Django ORM - 找到变量适合一系列模型字段的对象?

    python - Django 管理员登录返回 Forbidden 403 CSRF 验证失败。请求已中止