Configure Envoy for vue with grpc-web

Question

Not sure if SO is the correct place for this question but I give it a try. I need to get grpc-web running on my Vue frontend so I learned that I need a proxy for the grpc messages.

The vue app runs on a virtual linux machine as well as the envoy proxy but the whole port configuration is a little mystery to me to be honest. This is my current envoy.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 }}]

I need some help on how to use an envoy proxy is this conext. The only thing I know is correct is the socket_address of the grpc_service which points to my backend grpc server. But on what port do I run the vue app to not have cross-origin and how do these prefixes work?

edit:
I updated my envoy.yaml config what I now get if I open the webserver address 192.168.1.125:8080 in my browser is

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

when I open 192.168.1.125:8001 I see the website but I get a cross-origin warning because of

<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>

So my question is, how do I have to configure the envoy proxy to not have any cross-origin problems means to reach the webserver on port 8080?

update:
I think the root cause for the connection timeout is related to my http_filters which should only be applied to the /grpc route. But still can't figure out a configuration that works.

If more information is needed, let me know!