Включение CORS в хостинге Firebase
У меня действительно раздражающая проблема с CORS и моей функцией Google Cloud...
ошибка, которую я получаю:
Доступ к XMLHttpRequest в [URL-адрес моей функции] из источника 'http://локальный: 4200' заблокирован политикой CORS: поле заголовка запроса access-control-allow-origin не разрешено Access-Control-Allow-Headers в предварительном ответе.
Я уже пытался справиться с этим на стороне функции с помощью следующего кода:
if request.method == 'OPTIONS':
headers = {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET',
'Access-Control-Allow-Headers': 'Content-Type',
'Access-Control-Max-Age': '3600'
}
return ('', 204, headers)
а затем добавлен в основной возврат с помощью:
headers = {
'Access-Control-Allow-Origin': '*'
}
....
return(json.dumps(data), 200, headers)
это не работает....
Я также пробовал использовать заголовки firebase.json и тоже не работал...
даже пробовал с HttpHeaders в angular вот так:
const headers = new HttpHeaders()
.set("Access-Control-Allow-Origin", "*")
.set("Access-Control-Allow-Methods", "POST, GET, OPTIONS")
.set('cache-control', 'no-cache')
тоже не работает.....
затем я попытался использовать прокси (просто чтобы проверить, действительно ли это проблема) добавил proxy.config.json и, конечно, в dev он просто работает...
но проблема в том, что мне нужно иметь возможность загрузить приложение Angular на хостинг firebase, так как я могу исправить ошибку CORS в бэкэнде?
Я забыл упомянуть, что уже пробовал это... javascript const headers = new HttpHeaders() .set("Access-Control-Allow-Origin", "*") .set("Access-Control-Allow-Methods", "POST, GET, OPTIONS") .set('cache-control', 'no-cache')
Появляется ли эта ошибка при развертывании на хостинге firebase? Можете ли вы объяснить вопрос немного больше. если есть облачная функция. Также добавьте это, пожалуйста.
@MuhammadKamran Я добавил часть облачной функции, которая пытается обработать CORS, ошибка возникает, когда я пытаюсь использовать запрос как в среде разработки, так и на хостинге firebase, я попытался отключить CORS в Chrome, и, конечно, это работает, но это не решение для производства....
Привет. Японял твою точку зрения. Вам просто нужно обрабатывать cors в вашей облачной функции. Я могу предоставить конкретное решение. Но я все еще не вижу облачной функции в вашем посте. Вы его редактировали?
@ Мухаммад Камран, да. if request.method == 'OPTIONS': headers = { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'GET', 'Access-Control-Allow-Headers': 'Content-Type', 'Access-Control-Max-Age': '3600' } return ('', 204, headers) это часть облачной функции (на питоне), которая пытается обработать CORS.
Ответы 2
Один из самых простых способов избавиться от ошибок cors — использовать вызываемые функции. У них также есть пользовательский контекст. Что может быть действительно полезно.
Но если вы хотите создать API. Я бы порекомендовал использовать экспресс-пакет и пакет cors. Вот код, который я использую:
import * as express from 'express';
import * as cors from 'cors';
const app = express();
// cors middleware handles all the cors related issues.
app.use(cors({ origin: '*' }));
// you can add your routes in your app.
app.use('/users', usersRoute);
export const api = functions.https.onRequest(app);
Как я могу реализовать это на Angular?
@JuanQuintero Вы не можете, в этом примере экспресс-служба задается как промежуточное программное обеспечение, которое затем может вызывать Firebase API.
Ну, теперь это решено, проблема:
У меня есть заголовки CORS в облачных функциях (на стороне сервера) И на стороне веб-приложения это как-то не разрешено, поэтому я просто удалил код со стороны веб-приложения и оставил код только в облачной функции (на стороне сервера), это решило проблему проблема...
Спасибо всем!
Вам следует просмотреть вкладку сети вашего углового приложения. Скорее всего, это был предполетный запрос (заголовок
OPTIONS), который был заблокирован. Вам нужно будет как минимум добавитьOPTIONSкAccess-Control-Allow-Methods