CORS error when making requests through API umbrella

[AWaselnuk]

Hi,

We are getting a CORS error when making a client side request through the API umbrella. The request is attempting to post JSON with the x-api-key header included. I have included two screenshots of the same request being made to our API directly and through the API umbrella. As you can see, the request going through the umbrella fails the preflight with a CORS error.

[GUI]

I think the issue here is that header data doesn't get passed along on pre-flighted CORS requests. Since you're trying to pass the API key via the X-Api-Key HTTP header, this means the API key isn't actually present on the initial OPTIONS request. Instead, the OPTIONS request is just passing along the fact that it will eventually want to use that header (see the Access-Control-Request-Headers header), but then since no API key is actually present on the request, API Umbrella is denying the request. Mozilla's docs provide much more information on preflighted requests, and they provide a good example of how header data and the preflighted OPTIONS requests interact.

I think there are two primary options:

1. Pass the API key along via the api_key GET query string parameter (even if you're POSTing, you can still use a GET query string to pass along the api key). Since GET query strings aren't subject to these CORS header restrictions, this will allow the API key to be passed along on both the OPTIONS and the real POST request.
2. Setup your API backend to not require api keys for OPTIONS requests. Then be sure your API backend responds to preflight requests with a Access-Control-Allow-Headers: X-Api-Key (which judging from your first screenshot, I believe your API backend is already doing). This would allow the preflighted OPTIONS requests to hit your API backend despite not actually containing an API key. Then it's up to your API to respond with the appropriate CORS headers to allow the real POST to send the API key via the HTTP header. You can disable API Umbrella's enforcement of API keys only for OPTIONS requests in the API Backends section of the API Umbrella admin:
   1. Under "Sub-URL Request Settings" add a rule.
   2. Pick "OPTIONS" for the HTTP method and enter .* for the regex.
   3. For "API Key Checks" choose "Disabled".

I hope that helps and does the trick. Let me know if not. If this does explain the issue, this would probably be a good thing for us to document somewhere, since it's likely a common issue for anyone working with CORS and using HTTP headers.

[AWaselnuk]

Thank you for the thorough response. Indeed part of the problem is that I am forming a request that triggers the preflight request. From my understanding, POSTing with the x-api-key header will trigger the preflight in every browser.

I'll try both of your fixes and let you know how it turns out. In an ideal world, we would definitely be using the HTTP header mechanism for authentication.

[AWaselnuk]

It looks like the issue is exactly what you thought it was. I set up a quick test for option 1 and it seems to work. The preflight passes no problem.
example with jQuery:

var request = $.ajax({
    type: 'POST',
    url: 'http://api.mgd.io/v2/deal/search?api_key=' + key,
    contentType: 'application/json',
    data: searchParams,
    dataType: 'json'
});

I'll let you know when I have tried option 2.

[AWaselnuk]

We have tried option 2 and everything works as expected. Thanks again for your help!

[darylrobbins]

Option 2 appears to no longer work in API Umbrella 0.8.0. I am now getting 403 errors when attempting to invoke OPTIONS:

{
    "error": {
        "code": "API_KEY_MISSING",
        "message": "No api_key was supplied. Get one at http://demo.api.mygrocerydeals.com"
    }
}

[brylie]

Possibly related to isssue #81.