Странное поведение при вызове HttpClient только в Firefox
Я столкнулся со странной проблемой в приложении Angular 6 и вызовом бэкэнд-функции. По сути, я хочу добавить объект в список и сохранить его в БД. Он работал отлично до сегодняшнего дня, когда я обнаружил странное поведение в Firefox (в Chrome и Opera оно работает).
Чтобы сохранить объект в БД, приложение вызывает этот метод:
newPolicyObject(listId : number, object : any, objectType : string) {
let url = `${ConfigService.settings.appURL}/policy-r__ipobjs/policy-r__ipobj/${listId}`;
return this.httpClient
.post(url, JSON.stringify(object))
.pipe(catchError(this.handleError));
}
В журналах сервера я вижу, что запрос выполнен правильно:
[2018-09-27T10:51:29.165] [INFO] http - 127.0.0.1 - - "OPTIONS /policy-r__ipobjs/policy-r__ipobj/7 HTTP/1.1" 204 0 "" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:62.0) Gecko/20100101 Firefox/62.0"
[2018-09-27T10:51:29.258] [INFO] http - 127.0.0.1 - - "POST /policy-r__ipobjs/policy-r__ipobj/7 HTTP/1.1" 200 194 "http://localhost:4200/dashboard/policy" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:62.0) Gecko/20100101 Firefox/62.0"
И он сохраняет объект в БД, поэтому он работает. Но в Firefox я вижу эту ошибку на консоли (перевод с испанского, поэтому на английском она будет немного отличаться):
Blocked cross origin request: The same origin policy doesn't allow reading of remote resources on http://localhost:3000/policy-r__ipobjs/policy-r__ipobj/7. (Reason: CORS request failed).
И я вижу неожиданный запрос GET на вкладке сети Firefox:
Та же операция в Chrome или Opera работает нормально. Кроме того, я не видел этой ошибки где-либо еще в приложении. Также я пробовал на разных компьютерах и менял бэкэнд на рабочий сервер, и результат тот же.
РЕДАКТИРОВАТЬ
Вот ответ на запрос OPTIONS:
Есть какие-нибудь подсказки о том, в чем может быть причина?
Большое спасибо,
Мы установили параметры CORS на сервере несколько месяцев назад, и все это время он работал отлично. Я обновлю вопрос заголовками опций через мгновение.
Ответы 1
Проблема не имела ничего общего с модулем Angular или HttpClient. Это было связано с тем, как Firefox обрабатывает события DnD. По-видимому, Firefox обрабатывал перетаскиваемый объект как ссылку, поэтому пытался открыть его, когда я бросал его в один из контейнеров. Чтобы исправить это поведение, все, что я сделал, это добавил эту строку в обработчик событий drop:
onDrop(e: DragEvent) {
[....]
e.preventDefault();
[....]
}
Правильно ли ваш сервер реализует CORS? Можете ли вы показать заголовки, возвращаемые запросом опций?