サーバーレスCORSエラー：CORSヘッダーの「アクセス制御可能なメソッド」でメソッドが見つかりませんでした

Question

サーバーレスフレームワークを使用しようとしましたが、CORSを有効にするためのガイドに従っています。

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

また、serverless.ymlも追加しました。

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

私はAJAXを経由してエンドポイントを呼び出ししようとしたとき、最終的なエンドポイントはややここ

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

です。

$.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'); 
     } 
    }); 

何も起こりません。

Firefoxのコンソールがこのメッセージ

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’).

を示しクロムコンソールもこの

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.

を示ししかし、私はhttp://www.test-cors.orgでエンドポイントをしようとしたとき、それはしかし、大丈夫に見えます。

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 

はここ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== 

の応答ヘッダーはここで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== 

私が間違って何をしましたのためだのですか？

Answer 1

「json」のリクエストメソッド（typeプロパティを使用）を使用してリクエストしています。 'json'は無効ですrequest methodです。 type: 'json'の代わりに、おそらくdataType: 'json'が必要です。それはjquery v1.9のようmethod財産のために廃止されたものの

typeプロパティは、request method（例えば'GET'）を指定するために使用することができます。

$.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'); 
}});