AWS跨域问题 CLOUDFRONT <> APIGATEWAY

huangapple go评论75阅读模式
英文:

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

以下是您要翻译的内容:

  1. 针对解决此CORS问题,我必须执行两项操作。我正在使用Amazon API Gateway REST APILambda,并使用代理集成

  2. 首先,您需要配置API Gateway资源以实现能够响应至少以下由Fetch标准要求的预检请求的OPTIONS方法的响应头:

    • Access-Control-Allow-Methods
    • Access-Control-Allow-Headers
    • Access-Control-Allow-Origin

    这是我为我的一个应用程序所做的方式。

  3. 第二件事,如果您正在执行代理集成,那么您的后端还负责为不同类型的所有其他请求(包括GETPUTPOSTDELETE,除了OPTIONS)返回Access-Control-Allow-OriginAccess-Control-Allow-Headers标头。

    对于我来说,我使用了一个**.NET Lambda**函数,所以我做了类似于以下的操作。

    builder.Services.AddCors(item =&gt;
    {
        item.AddPolicy(&quot;CORSPolicy&quot;, builder =&gt;
        {
            builder.WithOrigins(&quot;https://abcd.cloudfront.net&quot;) 
            .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.

  1. First, you need to configure your API Gateway resource to implement an OPTIONS method that can respond to the OPTIONS 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.

    AWS跨域问题 CLOUDFRONT <> APIGATEWAY

  2. Second thing, if you are doing the proxy integration, then your backend is also responsible for returning the Access-Control-Allow-Origin and Access-Control-Allow-Headers headers for all other requests of different types including GET, PUT, POST and DELETE except OPTIONS (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 =&gt;
    {
    	item.AddPolicy(&quot;CORSPolicy&quot;, builder =&gt;
    	{
    		builder.WithOrigins(&quot;https://abcd.cloudfront.net&quot;) 
    		.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.

AWS跨域问题 CLOUDFRONT <> APIGATEWAY

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

huangapple
  • 本文由 发表于 2023年5月21日 21:14:11
  • 转载请务必保留本文链接:https://go.coder-hub.com/76300076.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定