gRPC web + envoy + Spring boot GRPC server - No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

gRPC server ( has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource)

• Started the gRPC server(https://github.com/vinsguru/vinsguru-blog-code-samples/tree/master/grpc/grpc-web/server) which is running on the 6565 port
• Started envoy server with below configuration

static_resources:
  listeners:
  - address:
      socket_address:
        address: 0.0.0.0
        port_value: 8080
    filter_chains:
    - filters:
      - name: envoy.filters.network.http_connection_manager
        typed_config:
          "@type": type.googleapis.com/envoy.extensions.filters.network.http_connection_manager.v3.HttpConnectionManager
          codec_type: AUTO
          stat_prefix: ingress_http
          access_log:
          - name: envoy.access_loggers.stdout
            typed_config:
              "@type": type.googleapis.com/envoy.extensions.access_loggers.stream.v3.StdoutAccessLog
          route_config:
            name: local_route
            virtual_hosts:
            - name: backend
              domains:
              - "*"
              routes:
              - match:
                  prefix: "/"
                  grpc: {}
                route:
                  cluster: backend_grpc_service
              cors:
                  allow_origin_string_match:
                  - prefix: "*"
                  - safe_regex:
                      google_re2: {}
                      regex: \*
                  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,Access-Control-Allow-Origin
                  max_age: "1728000"
                  expose_headers: grpc-status,grpc-message
          http_filters:
              - name: envoy.grpc_web
                typed_config:
                  "@type": type.googleapis.com/envoy.extensions.filters.http.grpc_web.v3.GrpcWeb
              - name: envoy.cors
                typed_config:
                  "@type": type.googleapis.com/envoy.extensions.filters.http.cors.v3.Cors
              - name: envoy.filters.http.router
                typed_config:
                  "@type": type.googleapis.com/envoy.extensions.filters.http.router.v3.Router


  clusters:
  - name: backend_grpc_service
    type: STRICT_DNS
    lb_policy: ROUND_ROBIN
    typed_extension_protocol_options:
      envoy.extensions.upstreams.http.v3.HttpProtocolOptions:
        "@type": type.googleapis.com/envoy.extensions.upstreams.http.v3.HttpProtocolOptions
        explicit_http_config:
          http2_protocol_options: {}
    load_assignment:
      cluster_name: backend_grpc_service
      endpoints:
      - lb_endpoints:
        - endpoint:
            address:
              socket_address:
                address: localhost
                port_value: 6565

• Started the grpcWebClient (https://github.com/vinsguru/vinsguru-blog-code-samples/tree/master/grpc/grpc-web/client)
• Opened the browser upon performing client operations I get below errors

Allowing all origins with below snippet, But it throws an error with Access-Control-Allow-Origin not present

allow_origin_string_match: - prefix: "*"

Browser console log

localhost/:1 Access to XMLHttpRequest at 'http://localhost:8080/calculator.CalculatorService/findSquare' from origin 'http://localhost:8811' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
bundle.js:1136 Uncaught TypeError: Cannot read properties of null (reading 'getResult')