[QUESTION] cors and error status 500 and handle it in frontend

First check

• I used the GitHub search to find a similar issue 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.

Description

When there is 500 error happens, the response header contains no information about cors. The browser console says: ‘Reason: CORS header ‘Access-Control-Allow-Origin’ missing’

I want to check the status code in in frontend(vue) with axios and alert a error message, but there is no error.response.status in axios catch. I guess it is related to the cors bedore the browser complains it in console.

Code to generate error 500

from fastapi import FastAPI
from starlette.middleware.cors import CORSMiddleware
import pandas as pd

app = FastAPI()

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

@app.get("/error")
async def five_hundrend_error():
    df = pd.read_csv("not_exists.csv")
    return df.to_dict('records')

Below is the response header of 500. There is no cors info.

HTTP/1.1 500 Internal Server Error
date: Sat, 07 Dec 2019 10:01:24 GMT
server: uvicorn
content-length: 21
content-type: text/plain; charset=utf-8

Is it intended to behave like this? Or it may be a bug?

EDIT: I finally get the 500 error handled in frontend after read the axios doc. I keep it open because I’m still curious about it.

[rigward]

@statueofmike I had the same issue recently, you don’t need to wrap each endpoint with try/catch manually, you can do that once in the custom exception-catching middleware.

Assuming that browser sends request from localhost:3000 to api on port 8080, here is an example that returns 500 status code together with CORS headers even though exception is thrown in the endpoint. catch_exceptions_middleware does the trick, the important thing is to use it before CORS middleware is used.

from fastapi import FastAPI
from starlette.middleware.cors import CORSMiddleware
from starlette.requests import Request
from starlette.responses import Response

app = FastAPI()


async def catch_exceptions_middleware(request: Request, call_next):
    try:
        return await call_next(request)
    except Exception:
        # you probably want some kind of logging here
        return Response("Internal server error", status_code=500)


app.middleware('http')(catch_exceptions_middleware)

app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)


@app.get('/exception')
def get_with_exception():
    raise Exception('some exception')
    return {'test': 'test'}


uvicorn.run(app, host="0.0.0.0", port=8080)

[tiangolo]

If you receive a 500 response that means you have an error in your backend app code (Python using FastAPI).

It doesn’t have anything to do with CORS. If you have an error, your app won’t be able to send any headers used for CORS. But the problem is not at CORS, is before that.

Check your error logs, from your Python code, where you run Uvicorn.