Login/Register
Keep getting CORS policy: No 'Access-Control-Allow-Origin' even with FastAPI CORSMiddleware
Asked Answered
Solved pythonreactjsfastapihttp-status-code-500
R

1

5

I am working on a project that has a FastAPI back end with a React Frontend. When calling the back end via fetch I sometimes get the following:

Access to fetch at 'http://localhost:8000/get-main-query-data' from origin 'http://localhost:3000' 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.

This happens every so often, I can call one endpoint then the error gets thrown. Sometimes the error gets thrown for all endpoints

I have set up Middleware in my main.py like so: (also at this line)

# allows cross-origin requests from React
origins = [
    "http://localhost",
    "http://localhost:3000",
]

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

Could this be an issue with fetch it's self? I am worried at when I get to host this ill be getting CORS errors and my prototype won't be working :(

The whole main.py is like so:

Backend

""" API to allow for data retrieval and manipulation. """
from typing import Optional

from fastapi import FastAPI, HTTPException, status
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel

import models
from db import Session

app = FastAPI()

""" Pydantic BaseModels for the API. """


class SignalJourneyAudiences(BaseModel):
    """SignalJourneyAudiences BaseModel."""

    audienceId: Optional[int]  # PK
    segment: str
    enabled: bool


class SignalJourneyAudienceConstraints(BaseModel):
    """SignalJourneyAudienceConstraints BaseModel."""

    uid: Optional[int]  # PK
    constraintId: int
    audienceId: int  # FK - SignalJourneyAudiences -> audienceId
    sourceId: int  # FK - SignalJourneySources -> sourceId
    constraintTypeId: int  # FK - SignalJourneyConstraintType -> constraintTypeId
    constraintValue: str
    targeting: bool
    frequency: int
    period: int


class SignalJourneyAudienceConstraintRelations(BaseModel):
    """SignalJourneyAudienceConstraintRelations BaseModel."""

    uid: Optional[int]  # PK
    audienceId: int
    relation: str
    constraintIds: str


class SignalJourneyConstraintType(BaseModel):
    """SignalJourneyConstraintType BaseModel."""

    constraintTypeId: Optional[int]  # PK
    constraintType: str


class SingalJourneySources(BaseModel):
    """SignalJourneySources BaseModel."""

    sourceId: Optional[int]  # PK
    source: str


# allows cross-origin requests from React
origins = [
    "http://localhost",
    "http://localhost:3000",
]

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

# database instance
db = Session()


@app.get("/")
def index():
    """Root endpoint."""
    return {
        "messagee": "Welcome to Signal Journey API. Please use the API documentation to learn more."
    }


@app.get("/audiences", status_code=status.HTTP_200_OK)
def get_audiences():
    """Get all audience data from the database."""
    return db.query(models.SignalJourneyAudiences).all()


@app.get("/audience-constraints", status_code=status.HTTP_200_OK)
def get_audience_constraints():
    """Get all audience constraint data from the database."""
    return db.query(models.SignalJourneyAudienceConstraints).all()


@app.get("/audience-constraints-relations", status_code=status.HTTP_200_OK)
def get_audience_constraints_relations():
    """Get all audience constraint data from the database."""
    return db.query(models.SignalJourneyAudienceConstraintRelations).all()


@app.get("/get-constraint-types", status_code=status.HTTP_200_OK)
def get_constraints_type():
    """Get all audience constraint data from the database."""

    return db.query(models.SignalJourneyConstraintType).all()


@app.post("/add-constraint-type", status_code=status.HTTP_200_OK)
def add_constraint_type(sjct: SignalJourneyConstraintType):
    """Add a constraint type to the database."""

    constraint_type_query = (
        db.query(models.SignalJourneyConstraintType)
        .filter(
            models.SignalJourneyConstraintType.constraintType
            == sjct.constraintType.upper()
            and models.SignalJourneyConstraintType.constraintTypeId
            == sjct.constraintTypeId
        )
        .first()
    )

    if constraint_type_query is not None:
        raise HTTPException(
            status_code=status.HTTP_400_BAD_REQUEST,
            detail="Constaint type already exists.",
        )

    constraint_type = models.SignalJourneyConstraintType(
        constraintType=sjct.constraintType.upper(),
    )

    db.add(constraint_type)
    db.commit()

    return {
        "message": f"Constraint type {sjct.constraintType.upper()} added successfully."
    }


@app.get("/get-sources", status_code=status.HTTP_200_OK)
def get_sources():
    """Get all sources data from the database."""
    return db.query(models.SingalJourneySources).all()


@app.post("/add-source", status_code=status.HTTP_200_OK)
def add_source_type(sjs: SingalJourneySources):
    """Add a new source type to the database."""
    source_type_query = (
        db.query(models.SingalJourneySources)
        .filter(models.SingalJourneySources.source == sjs.source.upper())
        .first()
    )

    if source_type_query is not None:
        raise HTTPException(
            status_code=status.HTTP_400_BAD_REQUEST,
            detail="Source already exists.",
        )

    source_type = models.SingalJourneySources(source=sjs.source.upper())

    db.add(source_type)
    db.commit()

    return {"message": f"Source {sjs.source.upper()} added successfully."}


"""
Endpoints for populating the UI with data. These need to consist of some joins.

Query to be used in SQL 

SELECT
    constraintid,
    sja.segment,
    sjs.source,
    sjct.constrainttype,
    constraintvalue,
    targeting,
    frequency,
    period
FROM signaljourneyaudienceconstraints
JOIN signaljourneyaudiences sja ON sja.audienceid = signaljourneyaudienceconstraints.audienceid;
JOIN signaljourneysources sjs ON sjs.sourceid = signaljourneyaudienceconstraints.sourceid
JOIN signaljourneyconstrainttype sjct ON sjct.constrainttypeid = signaljourneyaudienceconstraints.constrainttypeid
"""


@app.get("/get-main-query-data", status_code=status.HTTP_200_OK)
def get_main_query_data():
    """Returns data for the main query."""
    return (
        db.query(
            models.SignalJourneyAudienceConstraints.constraintId,
            models.SignalJourneyAudiences.segment,
            models.SingalJourneySources.source,
            models.SignalJourneyConstraintType.constraintType,
            models.SignalJourneyAudienceConstraints.constraintValue,
            models.SignalJourneyAudienceConstraints.targeting,
            models.SignalJourneyAudienceConstraints.frequency,
            models.SignalJourneyAudienceConstraints.period,
        )
        .join(
            models.SignalJourneyAudiences,
            models.SignalJourneyAudiences.audienceId
            == models.SignalJourneyAudienceConstraints.audienceId,
        )
        .join(
            models.SingalJourneySources,
            models.SingalJourneySources.sourceId
            == models.SignalJourneyAudienceConstraints.sourceId,
        )
        .join(
            models.SignalJourneyConstraintType,
            models.SignalJourneyConstraintType.constraintTypeId
            == models.SignalJourneyAudienceConstraints.constraintTypeId,
        )
        .all()
    )

Frontend

I am calling my API endpoints like so:

//form.jsx

 // pulls segments name from signaljourneyaudiences
  useEffect(() => {
    fetch('http://localhost:8000/audiences')
      .then((res) => res.json())
      .then((data) => setSegmentNames(data))
      .catch((err) => console.log(err));
  }, []);

  // pulls field names from signaljourneyaudiences
  useEffect(() => {
    fetch('http://localhost:8000/get-constraint-types')
      .then((res) => res.json())
      .then((data) => setConstraints(data))
      .catch((err) => console.log(err));
  }, []);

// table.jsx


  useEffect(() => {
    fetch('http://localhost:8000/get-main-query-data')
      .then((res) => res.json())
      .then((data) => {
        setTableData(data);
      })
      .catch((err) => console.log(err));
  }, []);

As you can see here the table has been populated by the endpoints but on the other hand, one of the dropdowns have not.

enter image description here

HTTP 500 error description

INFO:     127.0.0.1:62301 - "GET /get-constraint-types HTTP/1.1" 500 Internal Server Error
2022-02-24 09:26:44,234 INFO sqlalchemy.engine.Engine [cached since 2972s ago] ()
ERROR:    Exception in ASGI application
Traceback (most recent call last):
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/sqlalchemy/engine/base.py", line 1702, in _execute_context
    context = constructor(
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/sqlalchemy/engine/default.py", line 1013, in _init_compiled
    self.cursor = self.create_cursor()
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/sqlalchemy/engine/default.py", line 1361, in create_cursor
    return self.create_default_cursor()
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/sqlalchemy/engine/default.py", line 1364, in create_default_cursor
    return self._dbapi_connection.cursor()
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/sqlalchemy/pool/base.py", line 1083, in cursor
    return self.dbapi_connection.cursor(*args, **kwargs)
sqlite3.ProgrammingError: SQLite objects created in a thread can only be used in that same thread. The object was created in thread id 6191820800 and this is thread id 6174994432.

The above exception was the direct cause of the following exception:

Traceback (most recent call last):
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/uvicorn/protocols/http/httptools_impl.py", line 372, in run_asgi
    result = await app(self.scope, self.receive, self.send)
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/uvicorn/middleware/proxy_headers.py", line 75, in __call__
    return await self.app(scope, receive, send)
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/fastapi/applications.py", line 259, in __call__
    await super().__call__(scope, receive, send)
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/starlette/applications.py", line 112, in __call__
    await self.middleware_stack(scope, receive, send)
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/starlette/middleware/errors.py", line 181, in __call__
    raise exc
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/starlette/middleware/errors.py", line 159, in __call__
    await self.app(scope, receive, _send)
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/starlette/middleware/cors.py", line 92, in __call__
    await self.simple_response(scope, receive, send, request_headers=headers)
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/starlette/middleware/cors.py", line 147, in simple_response
    await self.app(scope, receive, send)
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/starlette/exceptions.py", line 82, in __call__
    raise exc
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/starlette/exceptions.py", line 71, in __call__
    await self.app(scope, receive, sender)
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/fastapi/middleware/asyncexitstack.py", line 21, in __call__
    raise e
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/fastapi/middleware/asyncexitstack.py", line 18, in __call__
    await self.app(scope, receive, send)
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/starlette/routing.py", line 656, in __call__
    await route.handle(scope, receive, send)
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/starlette/routing.py", line 259, in handle
    await self.app(scope, receive, send)
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/starlette/routing.py", line 61, in app
    response = await func(request)
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/fastapi/routing.py", line 227, in app
    raw_response = await run_endpoint_function(
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/fastapi/routing.py", line 162, in run_endpoint_function
    return await run_in_threadpool(dependant.call, **values)
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/starlette/concurrency.py", line 39, in run_in_threadpool
    return await anyio.to_thread.run_sync(func, *args)
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/anyio/to_thread.py", line 28, in run_sync
    return await get_asynclib().run_sync_in_worker_thread(func, *args, cancellable=cancellable,
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/anyio/_backends/_asyncio.py", line 818, in run_sync_in_worker_thread
    return await future
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/anyio/_backends/_asyncio.py", line 754, in run
    result = context.run(func, *args)
  File "/Users/paul/Developer/signal_journey/backend/./main.py", line 109, in get_constraints_type
    return db.query(models.SignalJourneyConstraintType).all()
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/sqlalchemy/orm/query.py", line 2759, in all
    return self._iter().all()
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/sqlalchemy/orm/query.py", line 2894, in _iter
    result = self.session.execute(
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/sqlalchemy/orm/session.py", line 1692, in execute
    result = conn._execute_20(statement, params or {}, execution_options)
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/sqlalchemy/engine/base.py", line 1614, in _execute_20
    return meth(self, args_10style, kwargs_10style, execution_options)
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/sqlalchemy/sql/elements.py", line 325, in _execute_on_connection
    return connection._execute_clauseelement(
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/sqlalchemy/engine/base.py", line 1481, in _execute_clauseelement
    ret = self._execute_context(
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/sqlalchemy/engine/base.py", line 1708, in _execute_context
    self._handle_dbapi_exception(
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/sqlalchemy/engine/base.py", line 2026, in _handle_dbapi_exception
    util.raise_(
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/sqlalchemy/util/compat.py", line 207, in raise_
    raise exception
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/sqlalchemy/engine/base.py", line 1702, in _execute_context
    context = constructor(
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/sqlalchemy/engine/default.py", line 1013, in _init_compiled
    self.cursor = self.create_cursor()
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/sqlalchemy/engine/default.py", line 1361, in create_cursor
    return self.create_default_cursor()
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/sqlalchemy/engine/default.py", line 1364, in create_default_cursor
    return self._dbapi_connection.cursor()
  File "/Users/paul/.local/share/virtualenvs/backend-CF5omcRU/lib/python3.9/site-packages/sqlalchemy/pool/base.py", line 1083, in cursor
    return self.dbapi_connection.cursor(*args, **kwargs)
sqlalchemy.exc.ProgrammingError: (sqlite3.ProgrammingError) SQLite objects created in a thread can only be used in that same thread. The object was created in thread id 6191820800 and this is thread id 6174994432.
[SQL: SELECT "SignalJourneyConstraintType"."constraintTypeId" AS "SignalJourneyConstraintType_constraintTypeId", "SignalJourneyConstraintType"."constraintType" AS "SignalJourneyConstraintType_constraintType" 
FROM "SignalJourneyConstraintType"]
[parameters: [{}]]
(Background on this error at: https://sqlalche.me/e/14/f405)
Rosena answered 23/2, 2022 at 21:52 Comment(4)
Does the server side generate any errors? What is the actual response from the server? If a 5xx error code is returned, the middleware doesn't get to insert their headers so the request fails to materialize in the frontend. – Dorthadorthea
@Dorthadorthea yup you're right it's a 500 error. I have added the whole error message into my question, I often get this I am not too sure... looks like it's related to sqlalchemy.exc.ProgrammingError: (sqlite3.ProgrammingError) SQLite objects created in a thread can only be used in that same thread. The object was created in thread id 6191820800 and this is thread id 6174994432. – Rosena
You want to create a separate Session for each request; you do this by using a Depends in your view together with a function to create a local Session. See fastapi.tiangolo.com/tutorial/sql-databases/… for an example of how to do this, instead of having a global Session object. – Dorthadorthea
thank you thank you! It took some refactoring but we got there!! I'm going to properly go through the tutorial later as I haven't created my crud functions in their own file. Seems easier for better readability – Rosena
D
8

When a server side error occurs (a response code of 5xx), the CORS middleware doesn't get to add their headers since the request is effectively terminated, making it impossible for the browser to read the response.

For your second problem, you should use a separate session for each invocation of your API. The reference guide has an example of how to do this:

SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)

...

# Dependency
def get_db():
    db = SessionLocal()
    try:
        yield db
    finally:
        db.close()

...

@app.post("/users/{user_id}/items/", response_model=schemas.Item)
def create_item_for_user(..., db: Session = Depends(get_db)):
    return crud.create_user_item(db=db, item=item, user_id=user_id)
Dorthadorthea answered 24/2, 2022 at 10:19 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.