'Incorrect Access-Control-Allow-Origin being added automatically to POST & DELETE endpoints [closed]

I have an app built with FastAPI hosted on API Gateway using serverless.

The API: https://xxxxx.execute-api.xx-xxxxxx-x.amazonaws.com/dev/{proxy+}

Since most of my endpoints are proxy endpoints, I am adding to the response headers as follows:

response.headers['Access-Control-Allow-Origin'] = "*"
response.headers['Access-Control-Allow-Credentials'] = "true"
response.headers['Access-Control-Allow-Headers'] = "Origin, X-Requested-With, Content-Type, Accept, x-access-token"

I have 3 different types of endpoints: GET, POST & DELETE.

The Access-Control-Allow-Origin is correctly assigned in the GET request as follows:

access-control-allow-credentials: true 
access-control-allow-headers: Origin,X-Requested-With,Content-Type,Accept,x-access-token 
access-control-allow-origin: * 
content-length: 150 
content-type: application/json 
date: Mon,09 Aug 2021 07:06:45 GMT 
x-amz-apigw-id: DyYQPFBHFiAFrQA= 
x-amzn-remapped-content-length: 150 
x-amzn-requestid: 24fac4dc-189c-468e-9ca7-1bfd6ccfbabe 
x-amzn-trace-id: Root=1-6110d401-2816fc3630142ecd24604935;Sampled=0 

it is not correctly being assigned in the POST & DELETE methods. When I host it on API Gateway, the above-mentioned API is being automatically added to the Access-Control-Allow-Origin in place of "*", which I am specifically mentioning when I declare the response headers as shown above.

The response headers for the POST & DELETE methods:

access-control-allow-credentials: true 
access-control-allow-headers: Origin,X-Requested-With,Content-Type,Accept,x-access-token  access-control-allow-methods: GET,POST,DELETE 
access-control-allow-origin: https://xxxxx.execute-api.xx-xxxxxx-x.amazonaws.com/dev/{proxy+} 
content-length: 392 
content-type: application/json 
date: Mon,09 Aug 2021 07:01:37 GMT 
x-amz-apigw-id: DyXgoHozliAFnJA= 
x-amzn-remapped-content-length: 392 
x-amzn-requestid: a03fad7e-1caf-4a8c-b188-932923085755 
x-amzn-trace-id: Root=1-6110d2d0-39fe47e07531d93a585117d7;Sampled=0 

Because of this, the following error is shown in the frontend:

Failed to load resource: Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin.

Is there something that I am missing that should be added for these methods?

Thanks

Edit 1:

I'm setting the response headers to all the endpoints as follows:

from fastapi import APIRouter

router = APIRouter(
    prefix="/dimensioning",
    tags=["dimensioning"],
)

@router.post('/')
def post_body(response: Response):
    response.headers['Access-Control-Allow-Origin'] = "*"
    response.headers['Access-Control-Allow-Credentials'] = "true"
    response.headers['Access-Control-Allow-Headers'] = "Origin, X-Requested-With, Content-Type, Accept, x-access-token"
    response.headers['Content-Type'] = "application/json"
    # do the other stuff

@router.get('/')
def get_body(response: Response):
    response.headers['Access-Control-Allow-Origin'] = "*"
    response.headers['Access-Control-Allow-Credentials'] = "true"
    response.headers['Access-Control-Allow-Headers'] = "Origin, X-Requested-With, Content-Type, Accept, x-access-token"
    response.headers['Content-Type'] = "application/json"
    # do the other stuff

@router.delete('/')
def delete_body(response: Response):
    response.headers['Access-Control-Allow-Origin'] = "*"
    response.headers['Access-Control-Allow-Credentials'] = "true"
    response.headers['Access-Control-Allow-Headers'] = "Origin, X-Requested-With, Content-Type, Accept, x-access-token"
    response.headers['Content-Type'] = "application/json"
    # do the other stuff

I am also following the structure here. So in my main.py, as done here, I have

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

Edit 2

When I inspect the response, I see that there are 2 APIs:

enter image description here

This is for the POST (which doesn't have the response headers I mention) enter image description here

This is for the OPTIONS method enter image description here



Solution 1:[1]

After spending hours on this issue and coordinating with the frontend developer, we realized that there was a missing parameter in the frontend that was required for the backend. It was causing an internal server error, that's why the headers were not available.

After adding the parameter, the requests were successful.

Solution 2:[2]

This error is probably related to the CORS specification.

According to the CORS specification you're not allowed to combine Access-Control-Allow-Credentials=true with Access-Control-Allow-Origin=* as it states:

When responding to a credentialed request, the server must specify an origin in the value of the Access-Control-Allow-Origin header, instead of specifying the "*" wildcard.

CORS is highly dependent though on the implementation by the client and in this case also the API manager and there are differences between how GET requests are handled and how POST and other requests are handled. If you want to support localhost for development, you might have to explicitly set the correct value for the Access-Control-Allow-Origin header in your code or using the API gateway configuration.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2