Ошибки CORS на Angular FE и виртуальной машине fastAPI GCP

#angular #fastapi

#angular #fastapi

Вопрос:

Здравствуйте, я получаю ошибки CORS при попытке достичь удаленной конечной точки.

Мой удаленный сервер — это контейнер Docker, использующий fastAPI. На стороне сервера я добавил это:

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

В Angular я указываю на URL-адрес, используя HttpInterceptor:

 const requestUrl = (environment.backend_sll ? 'https' : "https")  "://"   environment.backend_ip   req.url.split('/api')[1];

const newHeaders = new HttpHeaders({
            'content-type': 'application/json',
            'Access-Control-Allow-Origin': '*',
            "Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept"
        })

        const extendedReq = req.clone({
            url: requestUrl,
            headers: newHeaders,
            body: {...req.body, user_session_id}
        });

return next.handle(extendedReq).pipe(...
 

При запуске этой настройки я получаю эту ошибку:

введите описание изображения здесь

Я знаю, что в Angular вы можете использовать прокси для локального хоста, НО в рабочей среде этот прокси-файл не используется, и моя удаленная конечная точка НАХОДИТСЯ НЕ там, где мое имя хоста, поэтому я получаю те же ошибки и неправильный IP-адрес, потому что Angular использует мое имя хоста, а не удаленный IP-адрес. Из-за этого я переопределяю в HttpInterceptor URL-адрес и указываю нужный мне IP-адрес.

Как я могу узнать, связана ли проблема с FE или BE? Есть ли способ вообще удалить правила CORS в FE, и я знаю о соображениях безопасности.

Ответ №1:

Для этого есть временное решение.

  1. Используя расширение Chrome / Firefox, вы можете управлять ошибками cors. Это временное исправление, которое будет работать в процессе разработки.

    разрешить-cors-управление доступом