英文:
CORS Pre-flight checks OPTIONS error from AWS Gateway API
问题
I am struggling to resolve a '403' error:
'... has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status'
Any advice on how I can debug or what I could be missing is appreciated
Tests conducted thus far:
My lambda function in AWS responds with the correct headers:
-
OPTIONS CURL TEST:
-
Copied failed axios command as CURL (cmd) from chrome dev tools:
- (this does not work in command line, curl responds with: 'curl: (3) URL using bad/illegal format or missing URL') -
Copied failed axios command as fetch from chrome dev tools:
-
And postman response to prove without cors, the functions works:
Other info:
-
I have validated the url, x-api-key etc many times, and tried different configurations of the axios request, all result in the same response, see the following image of the axios request
-
A few images from APIGateway showing the requests and integrations:
OPTIONS request/response in the browser (suggested by Quentin):
My Current lines of reasoning:
- Maybe there is an additional security setting I need to define in my cloudwatch template?
- Maybe there is a bug in webpack with next.js / axios 0.27.2 / node 16.14.0. - I have found a near- identical response mentioned HERE
英文:
I am struggling to resolve a '403' error:
'... has been blocked by CORS policy: Response to preflight request
doesn't pass access control check: It does not have HTTP ok status'
Any advice on how I can debug or what I could be missing is appreciated
Tests conducted thus far:
My lambda function in AWS responds with the correct headers:
-
OPTIONS CURL TEST:
-
Copied failed axios command as CURL (cmd) from chrome dev tools :
- (this does not work in command line, curl responds with: 'curl: (3) URL using bad/illegal format or missing URL' ) -
Copied failed axios command as fetch from chrome dev tools:
-
And postman response to prove without cors, the functions works:
Other info:
-
I have validated the url, x-api-key etc many times, and tried
different configurations of the axios request, all result in the same response, see the following image of the axios request -
A few images from APIGateway showing the requests and
integrations:
OPTIONS request/response in the browser (suggested by Quentin ):
My Current lines of reasoning:
- Maybe there is an additional security setting I need to define in my
cloudwatch template? - Maybe there is a bug in webpack with next.js / axios 0.27.2 / node 16.14.0 . - I have
found a near- identical response mentioned HERE
答案1
得分: 0
403错误是由于网页浏览器在预检查阶段未预期到OPTIONS响应的x-api-key所致。
一旦我通过以下方式在CloudFormation模板中禁用了全局x-api-key的要求：
Auth:
ApiKeyRequired: false
如此处所示的结果；控制台显示OPTIONS -> API Key 'Not Required'。
- 响应成功！
总的来说，API网关干扰了预期的预检查过程，因为它的默认配置。请注意！
然而，在这个问题范围之外，有一个问题，即许多人报告说启用了ApiKeyRequired以进行POST操作，但对OPTIONS操作没有效果。这是一个CloudFormation的问题（请参阅下面的链接了解更多详情）。
更新：
在进一步的研究中，足够多的人在2022年3月抱怨了这个确切的问题，然后添加了一个特定的标志 'AddApiKeyRequiredToCorsPreflight'。
示例在这里。
讨论来源：
英文:
The 403 error is due to the OPTIONS response x-api-key not being expected by the web browser for pre-flight checks
Once I disabled the global x-api-key required in the cloudformation template via:
Auth:
ApiKeyRequired: false
The result as shown here; on the console depicts OPTIONS -> API Key 'Not Required'
-The response succeeded!
In conclusion, api-gateway interferes with the expected preflight process via it's default copnfiguration.
Be warned!
There is however a snag outside the scope of this question, in that multiple people have report difficulting enabled ApiKeyRequired for POST and not OPTIONS. This is a cloudformation issue (Please see linked sources below for more details)
UPDATE:
In conducting further research, enough people complained March 2022 with this exact problem, a specific flag 'AddApiKeyRequiredToCorsPreflight' was then added.
Example here
Discussion Sources:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论