How do I enable CORS?

Question

I am unable to enable CORS on any resources from AWS Api Gateway.

I used the "Enable Cors" button present on the web UI:

But attempting to use in development or production yields:

I'm using jQuery 2.2.4 and the method $.post.

What's going wrong?

UPDATE: test staging:

SUCCESS UPDATE:

AWS documentation can be quite large. What I failed to realize is that you must EXPORT a client generated SDK which has a global variable that generates methods based on the resources you provided. As such, I can FINALLY return a succesfull result when I use THIS code:

  const apigClient = apigClientFactory.newClient();

    apigClient.purchaseTokenPost({}, card, {})
        .then(function(result){
            console.log(result);
        }).catch(function(result){
            console.log(result);
        });

You enabled CORS on `/purchase/token` yet the URL in your error is `/test/purchase/token` — Rory McCrossan, Jun 23 '16 at 06:33
I have a stage called ```test``` as well...I've attached the screenshot above. Is this the same problem Rory? — ilrein, Jun 23 '16 at 12:27

score 0 · Answer 1 · edited May 23 '17 at 10:34

CORS seems to be setup correctly for your method. I tested with this tool: http://client.cors-api.appspot.com/client (Enter your invoke URL, the POST dropdown, and you can confirm the success "onload" callback is triggered)

Can you try making your request with plain JavaScript to narrow down if it's an issue with jQuery? See: A CORS POST request works from plain javascript, but why not with jQuery?

Edit: Found this on http://enable-cors.org/server_awsapigateway.html. Looks like the One-Click CORS button in API Gateway isn't compatible with jQuery:

Amazon API Gateway adds support for CORS enabling through a simple button in the API Gateway console. Unfortunately that button has a partial behavior, thus setting CORS correctly only for 200 answer (so not other HTTP status codes) and ignoring JQuery header support. The best solution considered so far is about avoding to use the CORS button and set configurations manually. This can be achieved in a couple of steps:...

(Final) Edit: This is a bug with API Gateway not applying header mappings when the integration returns an error response. This has been a known issue for quite a while: https://forums.aws.amazon.com/thread.jspa?threadID=220324&tstart=0

Adding X-Requested-With: '*' didn't help, switching to vanillia JS also didn't (I tried the post request from http://youmightnotneedjquery.com/). If I test my function in the web UI, it returns a token as expected. — ilrein, Jun 24 '16 at 14:40
Is your endpoint returning a 4xx or 5xx error by any chance? There is a known issue with CORS and error responses not sending the appropriate headers. — Lorenzo d, Jun 24 '16 at 21:00
I see from your screenshot that 400 is being returned. This has been a known issue for a while. See: https://forums.aws.amazon.com/thread.jspa?threadID=220324&tstart=0 — Lorenzo d, Jun 24 '16 at 21:07

E.J. Brennan · Answer 2 · 2016-06-24T18:39:04.250

I found that even for an 'unsecured' api call, i.e. one that your didn't secure with an API key (like I did to test something out), once I enabled cors it would only work if I created an API key and sent it in with the request - easy to do, may want to give it a try.

ADDL INFO:

Here is a sample jquery that worked for me after I enabled CORS on the endpoint:

function loadData() {
            $.ajax({
                type: "GET",
                cache: false,
                url: "https://k4t999edod.execute-api.us-east-1.amazonaws.com/prod/myapicall",
                crossDomain: true,
                dataType: "json",
                headers: { 'x-api-key': 'xoeNNQ9475PCAgLtNP18cTv6YTWWB2JFfOe', 'X-Amz-Date': '1/1/2000', 'X-Amz-Security-Token': 'xoeNNQ9475PCAgLtNP18cTv6YTWWB2JFfOe' },
                success: function (response) {
                    //do something here.
                }
            });
        }

Note I included the API key in two places (I scrambled the real ones)

Enabling an api key and adding 'x-api-key' headers to vanilla JS requests still return CORS errors. What am I doing wrong? =( — ilrein, Jun 24 '16 at 14:50

How do I enable CORS?

2 Answers2