title: Configure Envoy for vue with grpc-web
body: <p>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.</p>
  
  <p>The <code>vue app</code> runs on a virtual linux machine as well as the <code>envoy</code> proxy but the whole port configuration is a little mystery to me to be honest.
  This is my current <code>envoy.yaml</code></p>
  
  <pre><code>    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 }}]
  </code></pre>
  
  <p>I need some help on how to use an <code>envoy proxy</code> is this conext. The only thing I know is correct is the <code>socket_address</code> of the <code>grpc_service</code> which points to my backend grpc server.
  But on what port do I run the <code>vue app</code> to not have cross-origin and how do these <code>prefixes</code> work?</p>
  
  <p><strong>edit</strong>: <br>
  I updated my <code>envoy.yaml</code> config what I now get if I open the webserver address 192.168.1.125:<strong>8080</strong> in my browser is </p>
  
  <pre><code>upstream connect error or disconnect/reset before headers. reset reason: connection termination
  </code></pre>
  
  <p>when I open 192.168.1.125:<strong>8001</strong> I see the website but I get a cross-origin warning because of </p>
  
  <pre><code>&lt;script&gt;
  /* 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);
  &lt;/script&gt;
  </code></pre>
  
  <p>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?</p>
  
  <p><strong>update</strong>: <br>
  I think the root cause for the connection timeout is related to my <code>http_filters</code> which should only be applied to the <code>/grpc</code> route. But still can't figure out a configuration that works.</p>
  
  <p>If more information is needed, let me know!</p>