英文:
AWS CORS problem CLOUDFRONT <> APIGATEWAY
问题
I am struggling with the CORS error.
-
我遇到了CORS错误。
-
I've deployed a backend using APIGATEWAY. It works properly via POSTMAN at the https://APIGATEWAY_URL
-
我已部署了一个后端,使用APIGATEWAY。它在https://APIGATEWAY_URL上通过POSTMAN正常工作。
-
I've deployed a web app using CLOUDFRONT, and it works too, if I open the https://CLOUDFRONT_URL from the browser.
-
我已经部署了一个使用CLOUDFRONT的Web应用,如果我在浏览器中打开https://CLOUDFRONT_URL,它也可以正常工作。
PROBLEM
The web app requests are blocked because of the CORS Problem.
Access to XMLHttpRequest at '[APIGATEWAY_URL]' from origin '[CLOUDFRONT_URL]' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
问题
Web应用的请求由于CORS问题而被阻止。
来自起源'[CLOUDFRONT_URL]'的XMLHttpRequest访问'[APIGATEWAY_URL]'已被CORS策略阻止:请求的资源上没有'Access-Control-Allow-Origin'头。
Am I missing some configurations?
我是否缺少一些配置?
Thanks for help.
感谢帮助。
英文:
I am struggling with the CORS error.
- I've deployed a backend using APIGATEWAY. It works properly via POSTMAN at the https://APIGATEWAY_URL
- I've deployed a web app using CLOUDFRONT, and it works too, if I open the https://CLOUDFRONT_URL from the browser.
PROBLEM
The web app requests are blocked because of the CORS Problem.
Access to XMLHttpRequest at '[APIGATEWAY_URL]' from origin ' [CLOUDFRONT_URL]' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Am I missing some configurations?
Thanks for help
答案1
得分: 1
以下是您要翻译的内容:
-
针对解决此CORS问题,我必须执行两项操作。我正在使用Amazon API Gateway REST API与Lambda,并使用代理集成。
-
首先,您需要配置API Gateway资源以实现能够响应至少以下由Fetch标准要求的预检请求的
OPTIONS
方法的响应头:- Access-Control-Allow-Methods
- Access-Control-Allow-Headers
- Access-Control-Allow-Origin
这是我为我的一个应用程序所做的方式。
-
第二件事,如果您正在执行代理集成,那么您的后端还负责为不同类型的所有其他请求(包括
GET
、PUT
、POST
和DELETE
,除了OPTIONS
)返回Access-Control-Allow-Origin
和Access-Control-Allow-Headers
标头。对于我来说,我使用了一个**.NET Lambda**函数,所以我做了类似于以下的操作。
builder.Services.AddCors(item => { item.AddPolicy("CORSPolicy", builder => { builder.WithOrigins("https://abcd.cloudfront.net") .AllowAnyMethod() .AllowAnyHeader(); }); });
您可以在这里找到更多详细信息 - 为REST API资源启用CORS
英文:
For me, I had to do 2 things in order to fix this CORS issue. I was using Amazon API Gateway REST API with Lambda using Proxy integration.
-
First, you need to configure your API Gateway resource to implement an
OPTIONS
method that can respond to theOPTIONS
preflight request with at least the following response headers mandated by the Fetch standard:- Access-Control-Allow-Methods
- Access-Control-Allow-Headers
- Access-Control-Allow-Origin
And this is how, I did it for one of my applications.
-
Second thing, if you are doing the proxy integration, then your backend is also responsible for returning the
Access-Control-Allow-Origin
andAccess-Control-Allow-Headers
headers for all other requests of different types includingGET
,PUT
,POST
andDELETE
exceptOPTIONS
(since OPTIONS is already handled by the API Gateway).For me, it was a .NET Lambda function, so I did something like this.
builder.Services.AddCors(item => { item.AddPolicy("CORSPolicy", builder => { builder.WithOrigins("https://abcd.cloudfront.net") .AllowAnyMethod() .AllowAnyHeader(); }); });
You can find more details here - Enabling CORS for a REST API resource
答案2
得分: 0
请查看用于 AWS 示例 PAM 应用程序的 CDK 脚本。此应用程序成功地使用一个使用 Cloud Front 的 React 应用程序调用 API Gateway 端点。此应用程序演示了如何成功设置此配置。
后端代码在这里:
https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/javav2/usecases/pam_source_files
CDK/前端代码在这里:
https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/resources/cdk/photo_asset_manager
英文:
Take a look at the CDK Script for the AWS example PAM application. This app successfully invokes an API Gateway endpoints using a React app that uses Cloud Front. This app demonstrates how to succesfully set up this configuration.
Backend is here:
https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/javav2/usecases/pam_source_files
CDK/Front end is here:
https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/resources/cdk/photo_asset_manager
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论