Another CORS question

Hi all,

I’ve been struggling now for a couple of hours to get an API with CORS enabled working…

Simple setup (clean install of Tyk API gateway or Tyk Cloud – same results).

Created an API, upstream connecting to a NodeJS backend – assured there are no CORS headers set on this backend.

Enabled CORS under advanced options under my API and added * as the Allow origins.

As a test, request via OPTIONS (to simulate preflight request):

$ curl -vvv -X "OPTIONS" "https://robin-daniel-consultants.cloud.tyk.io/accounts/summary"

* Trying 54.172.157.154...
* Connected to robin-daniel-consultants.cloud.tyk.io (54.172.157.154) port 443 (#0)
* TLS 1.2 connection using TLS_ECDHE_RSA_WITH_AES_128_GCM_SHA256
* Server certificate: *.cloud.tyk.io
* Server certificate: Amazon
* Server certificate: Amazon Root CA 1
* Server certificate: Starfield Services Root Certificate Authority - G2
> OPTIONS /accounts/summary HTTP/1.1
> Host: robin-daniel-consultants.cloud.tyk.io
> User-Agent: curl/7.49.1
> Accept: */*
> 
< HTTP/1.1 200 OK
< Cache-control: no-cache="set-cookie"
< Content-Type: text/plain; charset=utf-8
< Date: Wed, 19 Oct 2016 16:12:28 GMT
< Set-Cookie: AWSELB=A15351871EED3822C057D8653DCD7A0559A3D6489F9C7A44DD1761E93BB097F9EB797032EEEC31C283199D6E83B43D6BCC3F4FED505E505A88E6DF63FD899D66D2925504F1;PATH=/;MAX-AGE=180
**< Vary: Origin**
**< Vary: Access-Control-Request-Method**
**< Vary: Access-Control-Request-Headers**
< Content-Length: 0
< Connection: keep-alive
< 
* Connection #0 to host robin-daniel-consultants.cloud.tyk.io left intact

As you can see… no indication of any of the (expected) Access-Control-Allow-Origin headers…

This breaks my Angular 2 app with the following exception:

XMLHttpRequest cannot load https://robin-daniel-consultants.cloud.tyk.io/accounts/summary. Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:4200’ is therefore not allowed access.

I attached my API config BELOW for anyone interested to help out… the CORS section is extracted from this file below:

"CORS": {
    "enable": true,
    "allowed_origins": [
        "*"
    ],
    "allowed_methods": [],
    "allowed_headers": [],
    "exposed_headers": [],
    "allow_credentials": false,
    "max_age": 24,
    "options_passthrough": false,
    "debug": false
},

Full API config:

{
    "id": "57fe3cd9f522e500010a71b1",
    "name": "Accounts API",
    "slug": "accounts",
    "api_id": "8b04aaaba37f4dbd5c69c8cd2263dc56",
    "org_id": "57fe3c1a3fb31100015b2a09",
    "use_keyless": false,
    "use_oauth2": false,
    "use_openid": true,
    "openid_options": {
        "providers": [
            {
                "issuer": "https://rdc.eu.auth0.com/",
                "client_ids": {
                    "TDY5cHh3UUtpeUpXeE5BYkFTRGp5enowVUp1d1M1Z1A=": "57fe3fb488249d00012c6c99"
                }
            }
        ],
        "segregate_by_client": false
    },
    "oauth_meta": {
        "allowed_access_types": [],
        "allowed_authorize_types": [],
        "auth_login_redirect": ""
    },
    "auth": {
        "use_param": false,
        "param_name": "",
        "use_cookie": false,
        "cookie_name": "",
        "auth_header_name": ""
    },
    "use_basic_auth": false,
    "enable_jwt": false,
    "use_standard_auth": false,
    "enable_coprocess_auth": false,
    "jwt_signing_method": "",
    "jwt_source": "",
    "jwt_identity_base_field": "",
    "jwt_client_base_field": "",
    "jwt_policy_field_name": "",
    "notifications": {
        "shared_secret": "",
        "oauth_on_keychange_url": ""
    },
    "enable_signature_checking": false,
    "hmac_allowed_clock_skew": -1,
    "base_identity_provided_by": "",
    "definition": {
        "location": "header",
        "key": "x-api-version"
    },
    "version_data": {
        "not_versioned": true,
        "versions": {
            "Default": {
                "name": "Default",
                "expires": "",
                "paths": {
                    "ignored": [],
                    "white_list": [],
                    "black_list": []
                },
                "use_extended_paths": true,
                "extended_paths": {},
                "global_headers": {},
                "global_headers_remove": [],
                "global_size_limit": 0,
                "override_target": ""
            }
        }
    },
    "uptime_tests": {
        "check_list": [],
        "config": {
            "expire_utime_after": 0,
            "service_discovery": {
                "use_discovery_service": false,
                "query_endpoint": "",
                "use_nested_query": false,
                "parent_data_path": "",
                "data_path": "",
                "port_data_path": "",
                "target_path": "",
                "use_target_list": false,
                "cache_timeout": 60,
                "endpoint_returns_list": false
            },
            "recheck_wait": 0
        }
    },
    "proxy": {
        "preserve_host_header": false,
        "listen_path": "/8b04aaaba37f4dbd5c69c8cd2263dc56/",
        "target_url": "http://ec2-52-212-72-84.eu-west-1.compute.amazonaws.com:8080/api/accounts/",
        "strip_listen_path": true,
        "enable_load_balancing": false,
        "target_list": [],
        "check_host_against_uptime_tests": false,
        "service_discovery": {
            "use_discovery_service": false,
            "query_endpoint": "",
            "use_nested_query": false,
            "parent_data_path": "",
            "data_path": "hostname",
            "port_data_path": "port",
            "target_path": "/api-slug",
            "use_target_list": false,
            "cache_timeout": 60,
            "endpoint_returns_list": false
        }
    },
    "disable_rate_limit": false,
    "disable_quota": false,
    "custom_middleware": {
        "pre": [],
        "post": [],
        "post_key_auth": [],
        "auth_check": {
            "name": "",
            "path": "",
            "require_session": false
        },
        "response": [],
        "driver": "",
        "id_extractor": {
            "extract_from": "",
            "extract_with": "",
            "extractor_config": {}
        }
    },
    "custom_middleware_bundle": "",
    "cache_options": {
        "cache_timeout": 60,
        "enable_cache": true,
        "cache_all_safe_requests": false,
        "cache_response_codes": [],
        "enable_upstream_cache_control": false
    },
    "session_lifetime": 0,
    "active": true,
    "auth_provider": {
        "name": "",
        "storage_engine": "",
        "meta": {}
    },
    "session_provider": {
        "name": "",
        "storage_engine": "",
        "meta": null
    },
    "event_handlers": {
        "events": {}
    },
    "enable_batch_request_support": false,
    "enable_ip_whitelisting": false,
    "allowed_ips": [],
    "dont_set_quota_on_create": false,
    "expire_analytics_after": 0,
    "response_processors": [],
    "CORS": {
        "enable": true,
        "allowed_origins": [
            "*"
        ],
        "allowed_methods": [],
        "allowed_headers": [],
        "exposed_headers": [],
        "allow_credentials": false,
        "max_age": 24,
        "options_passthrough": false,
        "debug": false
    },
    "domain": "",
    "do_not_track": false,
    "tags": [],
    "enable_context_vars": false
}

Take a look at this post:

Basically:

  1. Add some allowed methods (e.g. GET, POST, PUT)
  2. The CORS Spec needs Origin and Access-Control-Request-Method headers for pre-flight requests (OPTIONS)

Here’s it with Tyk Cloud proxying to example.com:

[email protected] ~> curl -vvv -X OPTIONS -H "Origin: http://localhost" -H "Access-Control-Request-Method: GET" https://xxxx.cloud.tyk.io/test/
*   Trying 52.205.26.151...
* Connected to xxxx.cloud.tyk.io (52.205.26.151) port 443 (#0)
* TLS 1.2 connection using TLS_ECDHE_RSA_WITH_AES_128_GCM_SHA256
* Server certificate: *.cloud.tyk.io
* Server certificate: Amazon
* Server certificate: Amazon Root CA 1
* Server certificate: Starfield Services Root Certificate Authority - G2
> OPTIONS /test/ HTTP/1.1
> Host: tyk-inc-portal-test.cloud.tyk.io
> User-Agent: curl/7.49.1
> Accept: */*
> Origin: http://localhost
> Access-Control-Request-Method: GET
>
< HTTP/1.1 200 OK
< Access-Control-Allow-Methods: GET
< Access-Control-Allow-Origin: http://localhost
< Access-Control-Max-Age: 24
< Cache-control: no-cache="set-cookie"
< Content-Type: text/plain; charset=utf-8
< Date: Wed, 19 Oct 2016 16:39:47 GMT
< Set-Cookie: AWSELB=A15351871EED3822C057D8653DCD7A0559A3D6489F2EDAC519C3F56B76311F575866272757EC31C283199D6E83B43D6BCC3F4FED505E505A88E6DF63FD899D66D2925504F1;PATH=/;MAX-AGE=180
< Vary: Origin
< Vary: Access-Control-Request-Method
< Vary: Access-Control-Request-Headers
< Content-Length: 0
< Connection: keep-alive
<
* Connection #0 to host xxx.cloud.tyk.io left intact

And for standard GET requests etc, you’ll need to ensure an origin header is present.

Thanks Martin! It is working now!

I did add the allowed methods before, but without the Origin and Access-Control-Request-Method request headers I did not see any difference.

The Auth0 client also passes the authorization header ; after adding this header to the Allowed Headers section, it worked perfectly.

Learned a lot, thanks thanks thanks :slight_smile:

1 Like