AWS API Gateway CORS 问题 - JS
Posted
技术标签:
【中文标题】AWS API Gateway CORS 问题 - JS【英文标题】:AWS API Gateway CORS issue - JS 【发布时间】:2018-08-21 06:53:20 【问题描述】:我在 COR 请求方面遇到了一点问题,我不确定自己做错了什么。
我使用以下代码发布到我在 AWS 中的 API 网关,并返回以下错误:“请求标头字段 Access-Control-Allow-Origin 在预检响应中被 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。
【问题讨论】:
我用远程 URL 尝试了这个脚本,它似乎工作。你试过打其他API
吗?
您能否包含您看到的一整套请求和响应标头,用于预检 OPTIONS 请求(如果有)以及您尝试发出的 GET/POST 请求.
绝对可以,看我的编辑,谢谢!
【参考方案1】:
这篇文章应该可以帮助您在 API 网关上启用 CORS
https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html
通过以下网址登录 API Gateway 控制台 https://console.aws.amazon.com/apigateway.
在 API Gateway 控制台中,选择 APIs 下的 API。
在“资源”下选择一个资源。这将为所有 资源上的方法。或者,您可以在资源下选择一种方法来启用 仅此方法的 CORS。
从操作下拉菜单中选择启用 CORS。
选择启用 CORS在启用 CORS 表单中,执行以下操作:
在
Access-Control-Allow-Headers
输入字段中,输入静态字符串 客户端必须提交的以逗号分隔的标头列表 资源的实际请求。使用控制台提供的标头 列表Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token
或指定您自己的标题。使用控制台提供的“*”值作为 Access-Control-Allow-Origin 标头值以允许来自的访问请求 所有域,或为来自 指定域。
选择启用 CORS 并替换现有的 CORS 标头。
在确认方法更改中,选择是,覆盖现有值 确认新的 CORS 设置。
【讨论】:
感谢 Gokul,我实际上已经在我的 AWS API 网关上启用了 CORS,这反过来又自动创建了一个选项方法。确保“Access-Control-Allow-Origin”为“*”并保持提供的默认标头。我实际上已经尝试过通过邮递员发布上述 JS 代码,它似乎可以工作,我实际上是在使用我的本地机器编写客户端代码,这可能是问题吗? api 正在返回 JSON 您是否尝试过从请求中删除Access-Control-Allow-Origin
和 cache-control
标头并尝试?它们不在OPTIONS
响应返回的允许Headers
列表中。
感谢 Gokul,我已经尝试了您的建议中的 2 种方法,在我的选项响应中添加了 Access-Control-Allow-Origin 和缓存控制标头,实际上完全删除了它,现在我收到此错误“请求的资源上不存在“Access-Control-Allow-Origin”标头。”即使我在我的 js 中设置它或从我的 js 中删除它。啊哈,我用这个把我的头发拉了出来。非常感谢您的帮助和时间。以上是关于AWS API Gateway CORS 问题 - JS的主要内容,如果未能解决你的问题,请参考以下文章
AWS API Gateway + AWS Lambda 中的 CORS
使用 BOTO3 为 AWS Api Gateway 自动化 CORS