получение данных с удаленного апи на локалхост через фетч

Рейтинг: 0Ответов: 1Опубликовано: 10.05.2023

Я работаю на локалхосте над веб-приложением на реакте + тайпскрипт. Бэк на FastApi коллеги подняли, я могу получать данные вставляя урл реквест в строке браузера, но пытаясь получать данные через фетч в приложении я ловлю ошибку корс.

Access to fetch at 'https://*****/offset=0&limit=15' 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.

Я понимаю, что дело в заголовке Access-Control-Allow-Origin. На моках типа dummyJSON в этом заголовке стоит просто *, которая позволяет собственно все источники. В нашем случае этот заголовок не указан. Как мне работать с бэком? Нужно, чтобы локалхост внесли как источник?

Я пробовал режим no-cors, но ловлю 405.

Почему же я могу тогда через браузер получать данные?

АПД. Смог получить данные после установки расширения для хрома, но что-то мне подсказывает, что это не очень хороший подход.

javascript reactjs fetch fastapi
Источник: Stack Overflow на русском

Ответы

▲ 1

Самым правильным решением будет добавить хост вашего фронтенда в ориджин на бэке. Но это только на время разработки, так как по итогу у вас бэк и фронт будут на одном домене. Пример взят из официальной документации по FastAPI:

from fastapi import FastAPI
from fastapi.middleware.cors 
import CORSMiddleware

app = FastAPI()

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

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


@app.get("/")
async def main():
    return {"message": "Hello World"}