CORS 502 Bad Gateway Error with this tech stack: FastAPI + ReactJS + AWS

[NB-123]

First Check

• I added a very descriptive title here.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the FastAPI documentation, with the integrated search.
• I already searched in Google "How to X in FastAPI" and didn't find any information.
• I already read and followed all the tutorial in the docs and didn't find an answer.
• I already checked if it is not related to FastAPI but to Pydantic.
• I already checked if it is not related to FastAPI but to Swagger UI.
• I already checked if it is not related to FastAPI but to ReDoc.

Commit to Help

• I commit to help with one of those options 👆

Example Code

from fastapi import FastAPI, Request, status
from starlette.middleware.cors import CORSMiddleware

app = FastAPI(title='My API')

origins = ["http://localhost:3000", "https://localhost:3000", "https://private-frontend-url.amplifyapp.com", "http://private-frontend-url.amplifyapp.com"]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"]
)

# All routes below here (both @app routes and other include_routes).

Description

I have my frontend (ReactJS) and backend (Python FastAPI) deployed separately on AWS. I keep getting this error message in my console when I open my frontend in Chrome and access my backend APIs:

Access to fetch at 'https://private-backend-url.awsapprunner.com/test' from origin 'https://private-frontend-url.amplifyapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. POST https://private-backend-url.awsapprunner.com/test net::ERR_FAILED 502 (Bad Gateway)

When running my backend and frontend separately on localhost, I see no issues at all.

I have shared my FastAPI code above. For added context, my ReactJS API Call is as follows:

try {
      const response = await fetch(
        'https://private-backend-url.awsapprunner.com/test' ,
        {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            ...newMessage,
            file: docName,
          }),
        }
      );

Upon inspecting element on Chrome, here are the relevant headers captured by the browser:

Request URL: https://private-backend-url.awsapprunner.com/test  
Request Method: POST  
Status Code: 502 Bad Gateway  
Referrer Policy:strict-origin-when-cross-origin  
content-length: 0  
server: envoy  
x-envoy-upstream-service-time: 2509 
Accept: */*  
Accept-Encoding: gzip, deflate, br  
Accept-Language: en-US,en;q=0.9  
Connection: keep-alive  
Content-Length: 212 
Content-Type: application/json  
Host: https://private-backend-url.awsapprunner.com 
Origin: https://private-frontend-url.amplifyapp.com 
Referer: https://private-frontend-url.amplifyapp.com/

I have tried multiple approaches based on what I have found on stackoverflow and other sources, but to no avail. Would appreciate guidance - this issue is deeply frustrating. Thanks.

Operating System

macOS, Other

Operating System Details

Localhost runs on macOS, actual deployment (which is the one I am having problem with) is on AWS

FastAPI Version

0.95.1

Python Version

3.10.7

Additional Context

No response