Как отправить почтовый запрос application-x-www-form-urlencoded в угловой форме - PullRequest
Новая
       11

Как отправить почтовый запрос application-x-www-form-urlencoded в угловой форме

0 голосов
/ 12 мая 2019

Я пишу угловое клиентское приложение для проекта Django API.Одна из конечных точек принимает запросы в формате application / x-www-form-urlencoded, так как она содержит как файловые, так и строковые данные, и я почти уверен, что она отлично работает на стороне сервера - я подготовил приложение / x-www-form-urlencoded запрос с использованием POSTMAN: 

HEADERS:
   Content-Type: application/x-www-form-urlencoded
BODY (form-data):
   experiment: http://127.0.0.1:8000/api/v1/experiments/6/
   measurement: http://127.0.0.1:8000/api/v1/measurements/4/
   variable: 
   x_axis: X_AXIS
   y_axis: Y_AXIS
   file_object: // here I've changed the field type and chose the .txt file

Конечно, сервер ответил правильно, и файл был добавлен.Вот как выглядит точное тело запроса: 

experiment=http://127.0.0.1:8000/api/v1/experiments/6/measurement=http://127.0.0.1:8000/api/v1/measurements/4/variable=x_axis=os Xy_axis=os Yfile_obj=[object Object]

Но теперь все усложняется.Я пытаюсь подготовить такой же запрос в Angular, используя реактивную форму и HttpClient.Допустим, сама реактивная форма работает как следует, но отправка запроса с параметром Content-Type, установленным в:

  • 'application / x-www-form-urlencoded', возвращает '500 Internal Server Error'и
  • 'multipart / data-form' return '415 Неподдерживаемый тип носителя'

Вот как я отправляю запрос: 

post(formGroup: FormGroup): Observable<DataFile> {
    const httpOption = {
      headers: new HttpHeaders({
        'Content-Type': 'application/x-www-form-urlencoded'
      })
    };

    return this.httpClient.post<DataFile>(this.apiEndpoints.datafilesCreateEndpoint(), formGroup.value, httpOption);
  }

и вот какточный запрос выглядит так: 

{"experiment":"http://127.0.0.1:8000/api/v1/experiments/6/","measurement":"http://127.0.0.1:8000/api/v1/measurements/4/","variable":" ","x_axis":"X AXIS","y_axis":"Y AXIS","file_obj":"C:\\fakepath\\navon.txt"}

Не знаю, почему данные формы запроса являются JSON, когда я установил Content-Type на другой.Может ли это быть причиной этой проблемы?

@ UPDATE Solution

Я удалил httpOptions из функции post, чтобы Angular автоматически передавал Content-Type.Затем, вместо того, чтобы передавать FormGroup.value в сообщение httpClient, я создал FormData и передал его вместо этого.

Вот как выглядит моя функция POST: 

post(experiment: SharedModel, measurement: SharedModel, andOtherDataINeed: any): Observable<DataFile> {

    const fd = new FormData();
    fd.append('experiment', experiment as any);
    ...
    fd.append('file_obj', file);

    return this.httpClient.post<DataFile>(this.apiEndpoints.datafilesCreateEndpoint(), fd);

1 Ответ

0 голосов
/ 12 мая 2019

Попробуйте исследовать библиотеку Axios https://github.com/axios/axios

Если вы прокрутите вниз, вы увидите пример, который вам нужен.Вы можете без проблем использовать Axios в приложении Angular.

...