0

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

sam
  • 19
  • 1
  • 4
  • please review this answer: [API Gateway CORS: no 'Access-Control-Allow-Origin' header](https://stackoverflow.com/questions/35190615/api-gateway-cors-no-access-control-allow-origin-header?rq=1) – Guy May 21 '23 at 18:26

2 Answers2

1

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.

    enter image description here

  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 =>
{
    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

Ankush Jain
  • 5,654
  • 4
  • 32
  • 57
  • HI I am using API Gateway HTTP API and The backend is implementing the CORS. The APIGATEWAY_URL and CLOUDFRONT_URL have been generated by the services respectively, they are not linked to a 'proper' domain name. Thanks. – sam May 21 '23 at 13:57
  • Then you have to implement it at API Gateway level also. Are you using CDK or SAM to provision those resources? If yes, you have to make changes there as well to enable CORS support. – Ankush Jain May 21 '23 at 13:59
  • Oh, the solution I provide is for REST API, not for HTTP. – Ankush Jain May 21 '23 at 14:01
0

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.

enter image description here

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

smac2020
  • 9,637
  • 4
  • 24
  • 38
  • I'll look at the script thanks. I am wondering if the problem is occurring because the APIGATEWAY_URL and CLOUDFRONT_URL domains are different. – sam May 21 '23 at 15:08