Question

我有一个Eloqua account，可用来捕获表单提交数据。我目前有一个非常简单的表单，其中包含一个用户输入字段。

按照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-server）而不是从localhost：4200（我的角度服务器号）提交常规前端表单时，绝对没有问题。另外，为什么我仅在发布数据而不是使用GET时需要读取远程资源。

从正常的HTML格式发布与使用Angular的http客户端发布不同吗？我该如何解决？

Answer 1

$.ajax({
    url: "<endpoint>",
    dataType: "jsonp",
    contentType:"application/json"
    success: function(result) {
        console.log(result); // server response
    }

});

为什么在使用Angular的http.post而不是传统的HTML表单时出现CORS错误？

1 个答案: