Угловой файл HttpClient - POST с данными формы - PullRequest
Новая
       42

Угловой файл HttpClient - POST с данными формы

0 голосов
/ 22 декабря 2018

В моем проекте Angular 7 я пытаюсь загрузить файл изображения вместе с другими данными формы в серверную часть Apache PHP.Используя HttpClient для выполнения запроса, POSTing только изображения само по себе работает нормально. 

// This works fine
uploadAvatar(payload: any): Observable<any> {
    const formData = new FormData();
    formData.set('avatar', payload.avatar);
    return this.http.post(`${api_url}/user/avatar`, formData)
}

// This does not
create(payload: any): Observable<any>{
    const formData = new FormData();
    formData.set('title', payload.title);
    formData.set('image', payload.image);
    return this.http.post(`${api_url}/path/to/add`, formData);
}

Запрос POST никогда не выполняется из-за неудачной предварительной проверки OPTIONS, в которой сервер жалуется, что файл изображенияотсутствует в данных запроса. 

Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Я попытался вручную установить заголовки для Content-Type: multipart/form-data и Content-Type: application/x-www-form-urlencoded, но ни один из них не работал.

Я попытался использовать UrlSearchParams и HttpParams вместо FormData, оба из которых также не дали мне удачи.

Когда запрос сделан в Почтальоне, он работает нормально.

Ответы [ 2 ]

0 голосов
/ 22 декабря 2018

1) Я согласен с первоначальным ответом, что это звучит как проблема CORS с конечной точкой '/ path / to / add', поэтому я определенно проверил бы бэкэнд сначала, чтобы увидеть, в чем разница между двумя конечными точками по сравнению с реализацией CORS.Как часть отладки CORS, я бы посмотрел на вкладке сети консоли вашего браузера несостоявшиеся запросы / ответы, чтобы увидеть, какие заголовки отправляются с клиента.Возможно, ваш проект уже добавляет HttpHeaders (например, некоторые проекты реализуют HttpInterceptor для добавления HttpHeaders во все запросы), и важно знать, что на самом деле отправляется для данного запроса.

2) Мне любопытнопочему вы добавили «в котором сервер жалуется, что файл данных отсутствует в данных запроса». .. вы видели конкретную ошибку в клиентских или серверных журналах?Совместное использование может предложить дополнительную причину.

3) В аналогичном посте предлагается попробовать без заголовков «multi-part / form-data». Стоит попробовать: Загрузить изображение с помощью HttpClient

0 голосов
/ 22 декабря 2018

Когда вы делаете запрос от Postman, CORS не участвует - браузер реализует протокол CORS, а Postman - нет.

Итак, я предполагаю, что с PHP-приложением что-то не так.настроен на обработку этого конкретного URL - он явно не отвечает на запрос OPTIONS, который браузер отправляет для проверки перед полетом (и который почтальон не отправляет).

Вы не показываете полныйсообщение об ошибке, но похоже, что приложение PHP отвечает на запрос OPTIONS с помощью кода ответа 404 или другого кода, не относящегося к серии 200.

...