Serverless CORS Error: Did not find method in CORS header ‘Access-Control-Allow-Methods'

Question

I tried using Serverless framework and have followed the guide to enable CORS.

const response = {
    statusCode: 200,
    headers: {
      'Access-Control-Allow-Origin': '*'
    },  
    body: JSON.stringify({
        temperature: 30,
        locationId: event.queryStringParameters || event.queryStringParameters.id
    })
  };

And I also added in the serverless.yml.

functions:
  getListComment:
    handler: handler.getListComment
    events:
        - http:
            path: comments/list
            method: get
            cors: true

The final endpoint is here

https://dgyoawr9n0.execute-api.us-east-1.amazonaws.com/dev/comments/list

Somewhat when I tried calling the endpoint via AJAX.

    $.ajax({
        url: 'https://dgyoawr9n0.execute-api.us-east-1.amazonaws.com/dev/comments/list',
        type: 'json',
        crossDomain: true,
        contentType: "application/json",
        success: function(data) {
            alert('test');
        }
    });

There is nothing happens.

The Firefox console shows this message

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://dgyoawr9n0.execute-api.us-east-1.amazonaws.com/dev/comments/list. (Reason: Did not find method in CORS header ‘Access-Control-Allow-Methods’).

And the Chrome console also shows this

XMLHttpRequest cannot load https://dgyoawr9n0.execute-api.us-east-1.amazonaws.com/dev/comments/list. Method JSON is not allowed by Access-Control-Allow-Methods in preflight response.

But when I tried the endpoint in http://www.test-cors.org, it looks okay, though.

Sending GET request to https://dgyoawr9n0.execute-api.us-east-1.amazonaws.com/dev/comments/list

Fired XHR event: loadstart
Fired XHR event: readystatechange
Fired XHR event: readystatechange
Fired XHR event: progress
Fired XHR event: readystatechange
Fired XHR event: load

XHR status: 200
XHR status text: OK
XHR exposed response headers:

    Content-Type: application/json

Here's the response header for OPTIONS

HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 0
Connection: keep-alive
Date: Sat, 17 Dec 2016 02:16:30 GMT
Access-Control-Allow-Headers: Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token
Access-Control-Allow-Methods: OPTIONS,GET
Access-Control-Allow-Origin: *
x-amzn-RequestId: d2ab4dce-c3fe-11e6-bcee-6767a7211424
X-Cache: Miss from cloudfront
Via: 1.1 c038088d4b94486d7346fd44d03188a0.cloudfront.net (CloudFront)
X-Amz-Cf-Id: 30nHstKUhLwnHDwYEF3VdugR3JsuXHvUScBRDRFHRhimPW_DHS7RPQ==

Here's for the GET

HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 158
Connection: keep-alive
Date: Sat, 17 Dec 2016 02:17:17 GMT
Access-Control-Allow-Methods: OPTIONS,GET
Access-Control-Allow-Origin: *
x-amzn-RequestId: ee6c19a6-c3fe-11e6-a0dc-01a17c495e09
X-Amzn-Trace-Id: Root=1-5854a02d-ba86e18abb4d47eb5094343b
X-Cache: Miss from cloudfront
Via: 1.1 18101d17be4ee51b5a03b68cfed50445.cloudfront.net (CloudFront)
X-Amz-Cf-Id: 8K8NhwXGzhqR4bYLSFrRglogJQmQq3D3GJ2P4FrYoO-naDs-I55haA==

What did I do wrong?

Answer 1

You're making the request using a request method of 'json' (via the type property); 'json' is not a valid request method. Instead of type: 'json' you probably want dataType: 'json'.

The type property can be used to specify the request method (eg 'GET'), though it was deprecated in favour of the method property as of jquery v1.9.

$.ajax({
url: 'https://dgyoawr9n0.execute-api.us-east-1.amazonaws.com/dev/comments/list',
method: 'GET', // not necessary since it will default to 'GET'
dataType: 'json', // use dataType, not type, to specify expected response data type
crossDomain: true,
contentType: "application/json",
success: function(data) {
    alert('test');
}});