时间戳

首页 > 解决方案 > 为什么在使用 Angular 的 http.post 而不是传统的 HTML 表单时会出现 CORS 错误？

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

问题描述

我有一个用于捕获表单提交数据的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-server）而不是从 localhost:4200 （我的角度服务器编号）提交。另外，当我只是发布数据而不是使用 GET 时，为什么需要读取远程资源。

从普通 HTML 表单发布与使用 Angular 的 http 客户端发布不同吗？我该如何解决这个问题？

标签： htmlangularpost

解决方案

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

});

推荐阅读