AWS API Gateway CORS问题-JS

Question

我遇到了CORs请求问题，并且不确定自己做错了什么。

我使用以下代码将其发布到AWS的API网关中，并返回以下错误：“在飞行前响应中，Access-Control-Allow-Headers不允许请求标头字段Access-Control-Allow-Origin。”

但是在我的飞行前响应中，其访问控制允许来源为“ *”

这是我的JS代码：

<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>

任何帮助深表感谢。

谢谢！ 庞

编辑：

添加了全套请求和响应

一般

.   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

响应标题

.   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

请求标题

.   :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

控制台错误：

无法加载https://apikey.execute-api.ap-southeast-2.amazonaws.com/outageCheck?test=test：Access-Control-Allow-Headers不允许请求标头字段Access-Control-Allow-Origin在飞行前的反应中。

Answer 1

这篇文章应该可以帮助您在API网关上启用CORS

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

1. 通过https://console.aws.amazon.com/apigateway登录到API Gateway控制台。

2. 在API Gateway控制台中，在“ API”下选择一个API。

3. 在“资源”下选择一个资源。 这将为资源上的所有方法启用CORS。 或者，您可以在资源下选择一种方法以仅为此方法启用CORS。

4. 从“操作”下拉菜单中选择“启用CORS”。

   • 选择启用CORS

5. 在“启用CORS”表单中，执行以下操作：

   • 在“ Access-Control-Allow-Headers输入字段中，键入客户端必须在资源的实际请求中以逗号分隔的标题列表的静态字符串。 使用控制台提供的Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token的标题列表或指定您自己的标题。

   • 使用控制台提供的值“ *”作为Access-Control-Allow-Origin标头值，以允许来自所有域的访问请求，或为来自指定域的所有访问请求指定命名域。

   • 选择启用CORS并替换现有的CORS标头。

6. 在“确认方法更改”中，选择“是，覆盖现有值”以确认新的CORS设置。