Як увімкнути CORS в FastAPI для локального HTML-файлу

8 Березня 2024 в 23:44 90

В даній статті ми розглянемо питання того, як увімкнути CORS (Cross-Origin Resource Sharing) в FastAPI для локального HTML-файлу, завантаженого за допомогою URL file:///. Це досить поширена проблема, особливо при розробці веб-додатків, коли вам потрібно взаємодіяти з локальним сервером FastAPI і локальним HTML-файлом на вашому комп’ютері. При розгляді цього питання ми також звернемо увагу на використання CORS в контексті веб-розробки загалом, а також на особливості роботи з локальними файлами в різних веб-браузерах.

Перед тим, як перейти до розв’язання проблеми, давайте з’ясуємо, що таке CORS і для чого він потрібен. CORS – це механізм, який дозволяє обмежувати, як веб-програми можуть взаємодіяти з ресурсами на інших доменах. Це забезпечує безпеку веб-додатків, запобігаючи несанкціонованому доступу до ресурсів. У контексті FastAPI, як і в багатьох інших веб-фреймворках, увімкнення CORS важливо, коли ви робите запити з клієнта, розташованого на іншому домені або піддомені, ніж сервер.

Тепер давайте перейдемо до конкретної проблеми, яку ми розглядаємо. При спробі взаємодіяти з FastAPI сервером з локального HTML-файлу, відкритого в браузері, може виникнути помилка CORS, навіть якщо обидва сервер і клієнт знаходяться на одному локальному хості. Ось приклад такої помилки:

CORS Missing Allow Origin [Cross-source (cross-origin) request blocked: The same origin policy disallows reading the remote resource at http://[::1]:8000/create_session/none. (Reason: CORS header 'Access-Control-Allow-Origin' is missing). Status code: 200.]

1 2	CORS Missing Allow Origin [Cross-source (cross-origin) request blocked: The same origin policy disallows reading the remote resource at http://[::1]:8000/create_session/none. (Reason: CORS header 'Access-Control-Allow-Origin' is missing). Status code: 200.]

Ця помилка виникає через те, що за замовчуванням браузери обмежують запити між різними доменами, навіть якщо вони знаходяться на одному хості. Щоб уникнути цієї помилки, нам потрібно встановити відповідні CORS-заголовки на сервері FastAPI.

Згідно з офіційною документацією FastAPI, для увімкнення CORS з підтримкою облікових даних ми повинні явно вказати дозволені джерела зберігання (allow_origins), дозволені методи (allow_methods), дозволені заголовки (allow_headers) та інші параметри. Давайте розглянемо приклад коду, який увімкне CORS для нашого локального сервера FastAPI:

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware, Response
app = FastAPI()
app.add_middleware(
    CORSMiddleware,
    allow_origins=['http://localhost:8000'],
    allow_credentials=True,
    allow_methods=['*'],
    allow_headers=['*']
)
@app.get('/')
def main():
    return Response('OK', status_code=200)

from fastapi import FastAPI

from fastapi.middleware.cors import CORSMiddleware, Response

app = FastAPI()

app.add_middleware(

CORSMiddleware,

allow_origins=['http://localhost:8000'],

allow_credentials=True,

allow_methods=['*'],

allow_headers=['*']

)

@app.get('/')

def main():

return Response('OK', status_code=200)

У цьому коді ми додаємо middleware CORS до нашого FastAPI додатку, який встановлює необхідні CORS-заголовки. Зверніть увагу, що ми вказуємо дозволене джерело (allow_origins) як http://localhost:8000, що відповідає URL нашого локального HTML-файлу.

Проте, незважаючи на встановлення CORS у нашому FastAPI додатку, може все ще виникати помилка CORS при спробі зробити запит з локального HTML-файлу. Це може бути пов’язано з деякими особливостями роботи браузерів з локальними файлами.

Одна з можливих причин цієї проблеми – це політика безпеки сховища браузера, яка може обмежувати доступ до локальних файлів з мережі (file:///) через CORS. Деякі браузери можуть обмежувати запити до локальних файлів з зовнішніх джерел через CORS, навіть якщо CORS налаштовано на сервері. Це може призводити до виникнення помилки CORS, навіть якщо ви встановили CORS у вашому FastAPI додатку.

Щоб уникнути цієї проблеми, ви можете спробувати використовувати специфічні налаштування браузера або спробувати інший браузер. Деякі браузери можуть мати іншу політику безпеки щодо локальних файлів і можуть дозволяти CORS запити до них.

У випадку, якщо ви продовжуєте отримувати помилку CORS навіть після встановлення CORS на сервері FastAPI і спроби інших браузерів, ви можете розглянути альтернативні підходи, такі як використання локального сервера для вашого HTML-файлу або розгляд інших методів взаємодії між вашим сервером і клієнтом.

В цій статті ми розглянули питання увімкнення CORS в FastAPI для локального HTML-файлу. Ми розглянули основні причини виникнення помилок CORS, а також надали приклад коду для увімкнення CORS у FastAPI додатку. Незважаючи на це, слід зауважити, що конкретні проблеми з CORS можуть виникати через різні фактори, і їх вирішення може вимагати додаткового дослідження та експериментів.