Cross-Origin Request Blocked

I am using a React front-end with Envoy and a Go server. When I attempt to call the gRPC service from the front-end, the request gets blocked.

I’ve tried adding {"Access-Control-Allow-Origin": "*"} to the request metadata and have also tried disabling the pre-flight check when I get an instance of the GreeterClient but neither has worked. Can anyone advise on what I might try next?

Here is the React component that calls the servie:

import React from 'react';
import logo from './logo.svg';
import './App.css';


const { GreeterClient } = require('./helloworld_grpc_web_pb');
const { HelloRequest, HelloResponse } = require('./helloworld_pb.js');


var client = new GreeterClient('http://localhost:8080');


class Dashboard extends React.Component {

    callGrpcService = () => {
        const request = new HelloRequest();
        request.setName('Hello World!');


        client.sayHello(request, {"Access-Control-Allow-Origin": "*"}, (err, response) => {
            if (response == null) {
                console.log(err)
            } else {
                console.log(response)
            }
        });
    }


    render() {
        return (
            <div className="App">
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <button style={{ padding: 10 }} onClick={this.callGrpcService}>Click for grpc request</button>
                </header>
            </div>
        );
    }
}


export default Dashboard;

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: local_service
              domains: ["*"]
              routes:
              - match: { prefix: "/" }
                route:
                  cluster: helloworld_service
                  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,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: helloworld_service
    connect_timeout: 0.25s
    type: logical_dns
    http2_protocol_options: {}
    lb_policy: round_robin
    hosts: [{ socket_address: { address: localhost, port_value: 9090 }}]

The error in the console is:

2

And also:

Object { code: 2, message: "Http response at 400 or 500 level", metadata: undefined }```

[kevinmichaelchen]

No need to reopen this issue, but for anyone else out there who runs into the issue where the OPTIONS request succeeds but the following POST request fails:

I was running into this issue because the POST request was sending an Authorization header and I forgot to add that to cors.allow_headers in envoy.yaml.

[paymog]

What do we do if no OPTIONS request is being sent but we’re still running into this CORS issue?

Here are the requests being sent by my browser, Brave:

Here’s the full error I’m seeing in my console:

Access to XMLHttpRequest at 'localhost:8080/pipeline.Web/HelloWorld' from origin 'http://localhost:3000' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, brave, chrome-untrusted, https.

Here’s my envoy config

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.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
                route_config:
                  name: local_route
                  virtual_hosts:
                    - name: local_service
                      domains: ["*"]
                      routes:
                        - match: { prefix: "/" }
                          route:
                            cluster: echo_service
                            timeout: 0s
                            max_stream_duration:
                              grpc_timeout_header_max: 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,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.filters.http.grpc_web
                  - name: envoy.filters.http.cors
                  - name: envoy.filters.http.router
  clusters:
    - name: echo_service
      connect_timeout: 0.25s
      type: logical_dns
      http2_protocol_options: {}
      lb_policy: round_robin
      load_assignment:
        cluster_name: cluster_0
        endpoints:
          - lb_endpoints:
              - endpoint:
                  address:
                    socket_address:
                      address: 127.0.0.1
                      port_value: 6789

Note that I changed the address of the cluster endpoint (the 2nd last line) to be 127.0.0.1 for local testing. Also note that my GRPC server is running on port 6789 which has been reflected in the envoy config.

EDIT: I just confirmed that envoy works with grpcurl. This leads me to believe that something funky is going on with my browser:

 ❯❯❯ grpcurl -plaintext -proto web-protos/web.proto localhost:6789 pipeline.Web/HelloWorld
{
  "response": "Hello "
}
 3:32pm /Users/paymahn/gadic/www
 ❯❯❯ grpcurl -plaintext -proto web-protos/web.proto localhost:8080 pipeline.Web/HelloWorld
{
  "response": "Hello "
}

EDIT 2: Figured out what’s going on, I didn’t have a scheme used during client construction. Switching from export default new WebClient("localhost:8080") to export default new WebClient("http://localhost:8080") solved this.