为啥在使用 Angular http.post 而不是传统的 HTML 表单时会出现 CORS 错误？
Posted
技术标签:
【中文标题】为啥在使用 Angular http.post 而不是传统的 HTML 表单时会出现 CORS 错误？【英文标题】：Why do I get CORS erros when using Angular's http.post but not with traditional HTML forms?为什么在使用 Angular http.post 而不是传统的 HTML 表单时会出现 CORS 错误？ 【发布时间】：2019-04-18 19:51:59 【问题描述】：我有一个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 客户端发帖不同吗？我该如何解决这个问题？
【问题讨论】：
我不会为此责怪 Angular。这就是 CORS 的工作原理另请参阅 ***.com/questions/11423682/cross-domain-form-posting 我不一定责怪角度。我责怪我对使用 HTTPClient 时发生的事情缺乏了解。它与发布的普通 HTML 表单有什么不同？ 【参考方案1】：$.ajax(
url: "<endpoint>",
dataType: "jsonp",
contentType:"application/json"
success: function(result)
console.log(result); // server response
);
【讨论】：
我怀疑这是否有帮助，甚至根本没有用。否则，为了说服我，请添加说明此代码的工作原理以及为什么它应该有助于解决问题。 当然……谢谢！！ 您的评论与您似乎没有按照我的建议采取行动显然存在冲突。你打算edit你的帖子添加解释吗？以上是关于为啥在使用 Angular http.post 而不是传统的 HTML 表单时会出现 CORS 错误？的主要内容，如果未能解决你的问题，请参考以下文章
Angular 的 $http.post 不起作用，它的 $http... 也不起作用，但 jQuerys ajax 起作用。为啥？
如何使用带有表单数据主体而不是 json 主体的 http 'POST'？ （Angular2/打字稿）