Add Access-Control-Allow-Origin to API Gateway based on Nginx

[giulioroggero]

To setup it you can use the Advanced section in Console/Project/Design and configuring the following files

server-extension.conf

location /api/ {
    # Allow CORS
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS, PATCH';
    add_header 'Access-Control-Allow-Headers' 'accept, authorization, content-type, origin, x-requested-with, user-agent, access-control-allow-origin, DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
    

    # Respond to preflight requests
    if ($request_method = 'OPTIONS') {
         add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS, PATCH';
        add_header 'Access-Control-Allow-Headers' 'accept, authorization, content-type, origin, x-requested-with, user-agent, access-control-allow-origin, DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
        add_header 'Access-Control-Max-Age' 60000;
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204; # No Content
    }

    add_header 'Access-Control-Allow-Credentials' 'true';
    proxy_pass http://crud-service$proxy_url;
    proxy_set_header Host $host; 
    proxy_set_header X-Real-IP $remote_addr; 
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
    proxy_set_header X-Forwarded-Proto $scheme;
}

upstreams.conf

upstream crud-service {
    server crud-service:80; # Replace with the address and port of your CRUD service
}

change crud-service with your microservice

[giulioroggero]

Do you know how to do the same with envoy api-gateway?

[giulioroggero]

Here is a way to setup cors within envoy

File endpoints.yaml in design advanced section. In this example we match two CRUD routes /v2/dashboards and /v2/metrics

- listener_name: website
  match:
    safe_regex:
      google_re2: {}
      regex: "^/v2/dashboards(\\\\?.*)?$" # This regex matches "/v2/dashboards" optionally followed by '?' and any characters
  route:
    cluster: "crud-service"
    prefix_rewrite: "/dashboards"
  typed_per_filter_config:
    "envoy.filters.http.cors":
      "@type": "type.googleapis.com/envoy.extensions.filters.http.cors.v3.CorsPolicy"
      allow_origin_string_match:
        - prefix: "*"
      "allow_methods": "GET, POST, PUT, DELETE, OPTIONS"
      "allow_headers": "*"
      "max_age": "86400"
      "allow_credentials": true
- listener_name: website
  match:
    safe_regex:
      google_re2: {}
      regex: "^/v2/metrics(\\\\?.*)?$" # This regex matches "/v2/metrics" optionally followed by '?' and any characters
  route:
    cluster: "crud-service"
    prefix_rewrite: "/metrics"
  typed_per_filter_config:
    "envoy.filters.http.cors":
      "@type": "type.googleapis.com/envoy.extensions.filters.http.cors.v3.CorsPolicy"
      allow_origin_string_match:
        - prefix: "*"
      "allow_methods": "GET, POST, PUT, DELETE, OPTIONS"
      "allow_headers": "*"
      "max_age": "86400"
      "allow_credentials": true

File http-filters.yaml

- listener_name: website
  name: envoy.filters.http.cors
  typed_config:
    "@type": type.googleapis.com/envoy.extensions.filters.http.cors.v3.Cors

[davide-parini]

In my case i needed also all subpaths to be available from other origins. To achieve this with Envoy API Gateway, i defined the whole endpoint in advanced mode, without creating an endpoint from the console Endpoint section. This allowed me to cover all subpaths without overwriting one by one the specific routes which are automatically configured by the console.

http-filters.yaml

- listener_name: frontend
  name: envoy.filters.http.cors
  typed_config:
    "@type": type.googleapis.com/envoy.extensions.filters.http.cors.v3.Cors

clusters.yaml

- "@type": type.googleapis.com/envoy.config.cluster.v3.Cluster
  name: crud-service-cluster
  connect_timeout: 0.5s
  type: LOGICAL_DNS
  lb_policy: ROUND_ROBIN
  load_assignment:
    cluster_name: crud-service-cluster
    endpoints:
    - lb_endpoints:
      - endpoint:
          address:
            socket_address:
              address: crud-service
              port_value: 80

endpoints.yaml

- listener_name: frontend
  match:
    prefix: "/v2/claims"
  route:
    cluster: "crud-service-cluster"
    prefix_rewrite: "/claims"
  typed_per_filter_config:
    "envoy.filters.http.cors":
      "@type": "type.googleapis.com/envoy.extensions.filters.http.cors.v3.CorsPolicy"
      allow_origin_string_match:
        - prefix: "*"
      "allow_methods": "GET, POST, PUT, PATCH, DELETE, OPTIONS"
      "allow_headers": "*"
      "max_age": "86400"
      "allow_credentials": true