AWS API Gateway CORS issue - JS

Question

Im experiencing abit of problem with CORs request and im not sure what im doing wrong.

I use the following code to post to my API Gateway in AWS and its coming back with the following error: "Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response."

But in my preflight response, its Access-Control-Allow-Origin is '*'

Here is my JS code:

<input type="button" id="click" value="Click Me">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

    $(document).ready(function(){

    var settings = {
          "async": true,
          "crossDomain": true,
          "url": url,
          "method": "POST",
          "headers": {
            "Access-Control-Allow-Origin": "*",
            "Cache-Control": "no-cache"
        }
    }

        $("#click").click(function() {
            $.ajax(settings).done(function (response) {
                alert(response);
            });
        });
    });

</script>

<p id='test'></p>

Any help is much appreciated.

Thanks! Pon

Edit:

Added full set of request and response

General

.   Request URL: https://apikey.execute-api.ap-southeast-2.amazonaws.com/
.   Request Method: OPTIONS
.   Status Code: 200 
.   Remote Address: 54.230.135.63:443
.   Referrer Policy: no-referrer-when-downgrade

Response Headers

.   access-control-allow-headers: Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token
.   access-control-allow-methods: DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT
.   access-control-allow-origin: *
.   content-length: 0
.   content-type: application/json
.   date: Wed, 14 Mar 2018 05:54:46 GMT
.   status: 200
.   via: 1.1 d112d3017705f4a4c66a2958899eb08b.cloudfront.net (CloudFront)
.   x-amz-cf-id: 97nK6qkoiCsMa6TvJvWGUYEevT2bWE4nlKcM8P8sthVeIk9E2BPN9Q==
.   x-amzn-requestid: 33279618-274c-11e8-97da-ffa5e9493919
.   x-cache: Miss from cloudfront

Request Headers

.   :authority: apikey.execute-api.ap-southeast-2.amazonaws.com
.   :method: OPTIONS
.   :path: /outageCheck?test=test
.   :scheme: https
.   accept: */*
.   accept-encoding: gzip, deflate, br
.   accept-language: en-GB,en-US;q=0.9,en;q=0.8
.   access-control-request-headers: access-control-allow-origin,cache-control
.   access-control-request-method: POST
.   origin: http://127.0.0.1:62332
.   user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.162 Safari/537.36

Console Error:

Failed to load https://apikey.execute-api.ap-southeast-2.amazonaws.com/outageCheck?test=test: Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.

I tried this script with a remote URL, it seems to work. Have you tried hitting some other API? — Gokul Chandrasekaran
Can you PLEASE include a full set of request AND response headers that you're seeing, for both the preflight OPTIONS request (if any) and also the GET/POST request that you're trying to make. — roryhewitt

Gokul Chandrasekaran Gokul Chandrasekaran · Accepted Answer · 2018-03-13T05:54:45

This post should help you enable CORS on your API gateway

https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html

Sign in to the API Gateway console at https://console.aws.amazon.com/apigateway.

In the API Gateway console, choose an API under APIs.

Choose a resource under Resources. This will enable CORS for all the methods on the resource. Alternatively, you could choose a method under the resource to enable CORS for just this method.

Choose Enable CORS from the Actions drop-down menu.

Choose Enable CORS

In the Enable CORS form, do the following:

In the Access-Control-Allow-Headers input field, type a static string of a comma-separated list of headers that the client must submit in the actual request of the resource. Use the console-provided header list of Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token or specify your own headers.

Use the console-provided value of '*' as the Access-Control-Allow-Origin header value to allow access requests from all domains, or specify a named domain to all access requests from the specified domain.

Choose Enable CORS and replace existing CORS headers.

In Confirm method changes, choose Yes, overwrite existing values to confirm the new CORS settings.

AWS API Gateway CORS issue - JS

1 Answers