Biggest Problem In Flet

[Muddassirofficial]

Duplicate Check

• [X] I have searched the opened issues and there are no duplicates

Describe the bug

In flet web deployment we always face a big problem we can't use any API And cant connect to database because of CORS Issue

Code

No response

To reproduce

fetch data from database using flask API and request module in flet and show data

Expected behavior

I want to fetch data from database using flask API and request module in flet and show data in browser

Screenshots

Operating System

Windows

Operating system details

Windows 11

Flet version

0.23.1

Regression

No, it isn't

Suggestions

Kindly resolve this issue it's a serious problem

Additional details

No response

[ndonkoHenri]

Can you provide a simple code example to reproduce the issue? What library do you use for the requests?

[FeodorFitsner]

I believe it's not specific to Flet. CORS is applicable to any application that runs in a browser.

[burhansvural]

import flet as ft
import flet.fastapi as flet_fastapi
from fastapi.middleware.cors import CORSMiddleware
import uvicorn
import requests


async def fetch_data(url):
    response = requests.get(url)
    if response.status_code == 200:
        return response.json()
    else:
        return []


async def main(page: ft.Page):
    # Fetch data from Flask endpoint
    students = await fetch_data('https://tender-adjoining-veil.glitch.me/students')

    # Define DataTable columns and rows dynamically
    columns = [
        ft.DataColumn(ft.Text("ID")),
        ft.DataColumn(ft.Text("First Name")),
        ft.DataColumn(ft.Text("Last Name")),
        ft.DataColumn(ft.Text("Age"), numeric=True),
    ]

    rows = []
    for student in students:
        rows.append(ft.DataRow(
            cells=[
                ft.DataCell(ft.Text(str(student.get('id', '')))),
                ft.DataCell(ft.Text(student.get('name', ''))),
                ft.DataCell(ft.Text(student.get('email', ''))),
                ft.DataCell(ft.Text(str(student.get('age', '')))),
            ]
        ))

    # Add DataTable to the page
    page.add(
        ft.DataTable(
            columns=columns,
            rows=rows
        )
    )


async def root_main(page: ft.Page):
    students = await fetch_data('https://tender-adjoining-veil.glitch.me/students')

    # Define DataTable columns and rows dynamically
    columns = [
        ft.DataColumn(ft.Text("ID")),
        ft.DataColumn(ft.Text("First Name")),
        ft.DataColumn(ft.Text("Last Name")),
        ft.DataColumn(ft.Text("Age"), numeric=True),
    ]

    rows = []
    for student in students:
        rows.append(ft.DataRow(
            cells=[
                ft.DataCell(ft.Text(str(student.get('id', '')))),
                ft.DataCell(ft.Text(student.get('name', ''))),
                ft.DataCell(ft.Text(student.get('email', ''))),
                ft.DataCell(ft.Text(str(student.get('age', '')))),
            ]
        ))

    # Add DataTable to the page
    page.add(
        ft.DataTable(
            columns=columns,
            rows=rows
        )
    )


async def sub_main(page: ft.Page):
    await page.add_async(ft.Text("This is sub app!"))


app = flet_fastapi.FastAPI()

origins = [
    "http://localhost:8000",
]

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

app.mount("/sub-app", flet_fastapi.app(sub_main))
app.mount("/", flet_fastapi.app(root_main))

if __name__ == "__main__":
    # main4 is my .py file name
    uvicorn.run("main4:app", host="127.0.0.1", port=8000, reload=True)