'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:
This is for the POST (which doesn't have the response headers I mention)
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 |