如何启用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);
        });

Answer 1

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

Answer 2

I found that even for an 'unsecured' api call, ie 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)