Typescript 使用grpc web为vue配置特使

不确定这个问题是否正确，但我尝试一下。 我需要在我的Vue前端上运行grpc web，因此我了解到我需要grpc消息的代理

vue应用程序

运行在虚拟linux机器上，也运行在

embasic

代理上，但老实说，整个端口配置对我来说有点神秘。 这是我目前的特使。yaml

    admin:
  access_log_path: /tmp/admin_access.log
  address:
    socket_address: { address: 0.0.0.0, port_value: 9901 }


static_resources:
  listeners:
  - name: listener_0
    address:
      socket_address: { address: 0.0.0.0, port_value: 8080 }
    filter_chains:
    - filters:
      - name: envoy.http_connection_manager
        config:
          codec_type: auto
          stat_prefix: ingress_http
          route_config:
            name: local_route
            virtual_hosts:
            - name: grpc_service_host
              domains: ["*"]
              routes:

              - match: { prefix: "/grpc" }
                route:
                  prefix_rewrite: "/"
                  cluster: grpc_service
                  max_grpc_timeout: 0s

              - match: { prefix: "/" }
                route:
                  cluster: vue_service
              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,custom-header-1,x-accept-content-transfer-encoding,x-accept-response-streaming,x-user-agent,x-grpc-web,grpc-timeout
                max_age: "1728000"
                expose_headers: custom-header-1,grpc-status,grpc-message

          http_filters:
          - name: envoy.grpc_web
          - name: envoy.cors
          - name: envoy.router

  clusters:
  - name: grpc_service
    connect_timeout: 5s
    type: logical_dns
    http2_protocol_options: {}
    lb_policy: round_robin
    hosts: [{ socket_address: { address: 192.168.1.27, port_value: 50055 }}]

  - name: vue_service
    connect_timeout: 5s
    type: logical_dns
    http2_protocol_options: {}
    lb_policy: round_robin
    hosts: [{ socket_address: { address: 192.168.1.125, port_value: 8001 }}]

我需要一些关于如何使用

特使代理的帮助

这是CONNEXT。我只知道

grpc\u服务的
socket\u地址是正确的，它指向我的后端grpc服务器。
但是，我应该在哪个端口运行
vue应用程序
以避免交叉源代码，这些
前缀如何工作

编辑：

我更新了我的
特使.yaml
配置，如果我在浏览器中打开Web服务器地址192.168.1.125，我现在得到的是：8080

upstream connect error or disconnect/reset before headers. reset reason: connection termination

当我打开192.168.1.125:8001时，我看到了该网站，但由于

<script>
/* eslint-disable no-unused-vars */
import * as grpcWeb from 'grpc-web';
import {FrontendClientServiceClient} from './model/frontend_client_grpc_web_pb';
import {Empty} from './model/common_pb';
import {SerializationStatus} from './model/frontend_client_pb';

const service = new FrontendClientServiceClient('http://192.168.125:8080/grpc', null, null);
const request = new Empty();

const call = service.statusStreamSubscription(request);
</script>


/*eslint禁用无未使用的变量*/
从“grpc web”导入*作为grpcWeb；
从“./model/frontend_client_grpc_web_pb”导入{FrontendClientServiceClient}；
从“./model/common_pb”导入{Empty}；
从“./model/frontend_client_pb”导入{SerializationStatus}；
const service=新的FrontendClientServiceClient（'http://192.168.125:8080/grpc，空，空）；
const request=new Empty（）；
const call=service.statusStreamSubscription（请求）；

因此，我的问题是，如何配置特使代理，使其不存在任何跨源问题，以访问端口8080上的Web服务器

更新：

我认为连接超时的根本原因与我的
http\u过滤器有关，它应该只应用于
/grpc
路由。但仍然无法找到一种有效的配置

如果需要更多信息，请告诉我
 我们已经发布了一个HelloWorld示例，其中包含一个非常典型的设置（也有Cors设置）的示例
embasic.yaml
。请查看我认为我的特使问题与grpc无关，因为在我的
match
中，一个简单的
direct_响应
也不起作用，但我可以访问管理页面。。。