无服务器 CORS 错误：在 CORS 标头“Access-Control-Allow-Methods”中找不到方法

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

最后的终点在这里

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

当我尝试通过 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');
        }
    });

什么都没有发生。

Firefox 控制台显示此消息

跨域请求被阻止：同源策略不允许读取 远程资源在 https://dgyoawr9n0.execute-api.us-east-1.amazonaws.com/dev/comments/list。 （原因：在 CORS 标头中找不到方法 “访问控制允许方法”）。

Chrome 控制台也显示了这一点

XMLHttpRequest 无法加载 https://dgyoawr9n0.execute-api.us-east-1.amazonaws.com/dev/comments/list。 方法 JSON 不被 Access-Control-Allow-Methods 所允许 预检响应。

但是当我尝试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。你可能想要dataType: 'json' 而不是type: 'json'。

type 属性可用于指定request method（例如'GET'），但从jquery v1.9 开始，method 属性已被弃用。

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