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)
This is for the OPTIONS method
Advertisement
Answer
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.