AWS API Gateway CORS问题-JS [英] AWS API Gateway CORS issue - JS

问题描述

我在CORs请求中遇到了一些问题，我不确定自己在做什么错。

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

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

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

但是在我的飞行前响应中，其Access-Control-Allow-Origin为'*'

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

这是我的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>

任何帮助都非常感谢。

Any help is much appreciated.

谢谢！
Pon

Thanks! Pon

编辑：

添加了全套请求和响应

常规

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

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.

推荐答案

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

This post should help you enable CORS on your API gateway

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

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

在API网关控制台中，选择

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

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

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.

从操作下拉菜单中选择启用CORS。 。

Choose Enable CORS from the Actions drop-down menu.

• 选择启用CORS

在启用CORS表单中，执行以下操作：

In the Enable CORS form, do the following:

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

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

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

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.

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

Choose Enable CORS and replace existing CORS headers.

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

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

这篇关于AWS API Gateway CORS问题-JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！