Почему я получаю ошибки CORS при использовании http.post Angular, но не с традиционными формами HTML? - PullRequest
Новая
       21

Почему я получаю ошибки CORS при использовании http.post Angular, но не с традиционными формами HTML?

0 голосов
/ 15 ноября 2018

У меня есть учетная запись Eloqua , которую я использую для сбора данных отправки формы.В настоящее время у меня есть очень простая форма, которая имеет одно поле ввода пользователя.

Следуя документации Eloqua, я успешно отправил их на сервер, выполнив следующие действия.

<body>
    <form action="https://sXXXXXXXX.t.eloqua.com/e/f2" method="POST">
        <input type="text" name="name">
        <input type="hidden" name="elqFormName" value="myForm" id="eloquaFormName">
        <input type="hidden" name="elqSiteID" value="XXXXXXXXXXX"> 
        <input type="hidden" name="elqCustomerGUID" value="">
        <input type="hidden" name="elqCookieWrite" value="0"> 

        <button type="submit">Submit</button>
      </form>
</body>

И это успешно отправляет POST на серверы Eloqua и собирает данные.

Проблема, с которой я столкнулся сейчас, заключается в том, что я хотел бы интегрировать эту форму в угловой проект.Таким образом, мой html компонента выглядит следующим образом: 

<form [formGroup]="user_form_data" (ngSubmit)="onSubmit($event)">
  <input type="text" name="name" [formControl]="q1" required minlength="4" id="">
  <input type="hidden" name="elqFormName" value="myForm" id="eloquaFormName">
  <input type="hidden" name="elqSiteID" value="XXXXXXXXXXX"> 
  <input type="hidden" name="elqCustomerGUID" value="">
  <input type="hidden" name="elqCookieWrite" value="0"> 

  <button type="submit">Submit</button>
</form>

А вот функции ввода в машинописи.

Сначала я внедряю HttpClient 

private http: HttpClient

Затем я проверяю, что этодопустимый 

  onSubmit() {
    if (this.user_form_data.valid === true) {
      this.postForm();
    }
    else {
      console.log('not valid!');
    }
  }

А затем я отправляю его 

  postForm() {
    console.log('Attempting to post form!');
    this.http.post('https://sXXXXXXXX.t.eloqua.com/e/f2', {
      'name': 'TEST NAME',
      'elqFormName': 'myForm',
      'elqSiteID': 'XXXXXXXXX',
      'elqCustomerGUID': '',
      'elqCookieWrite': '0'
    }).subscribe(
      data => {
        console.log('Post was successful: ', data);
      },
      error => {
        console.log('Error: ', error);
      }
    );
  }

Но это не удается из-за следующей ошибки.

Запрос перекрестного источника заблокирован: тот же источникПолитика запрещает чтение удаленного ресурса на https://sXXXXXXXXX.t.eloqua.com/e/f2. (причина: запрос CORS не был выполнен)

Что меня смущает, так это то, что обычная форма интерфейса передается абсолютно без проблем.localhost: 3000 (потому что я всегда запускаю lite-сервер), но не с localhost: 4200 (мой угловой номер сервера).Кроме того, почему удаленный ресурс нужно читать, когда я просто размещаю данные, а не использую GET.

Отличается ли публикация из обычной HTML-формы от публикации с использованием http-клиента Angular?Как я могу решить это?

...