从外部问题（角度形式）发布到机械土耳其人失败或什么都不做

Question

我有外部 angular 应用程序用作 AWS Mechanical Turk 中的外部问题。 我在这个 angular 应用程序中有一个表格，我尝试按照 AWS 的文档提交它： 外部表格文档。

据我了解，目标是将表单提交到以下地址：

https://workersandbox.mturk.com/mturk/externalSubmit?assignmentId=..。

当我尝试使用 http 客户端向该地址发帖时，如下所示：

HTML：

<form (ngSubmit)="onSubmit()">
...
<button mat-raised-button color="primary" type="submit">Submit</button>
</form>

TS，在onSubmit中：

// submit to mturk
this.http.post(`https://workersandbox.mturk.com/mturk/externalSubmit?assignmentId=${this.currentAssignmetID[0]}`, {
assignmentId: this.currentAssignmetID[0]
}).subscribe(data => {
console.log('data from submit to mturk: ', data);
});

我收到 CORS 错误。

当我读到这个问题时，我的想法是 Mechanical Turk 正在等待 iframe “重定向”到这个地址，而不是发送外部 http 请求。

所以我将 HTML 文件更改为：

<form [formGroup]="qualifierForm" [action]="postExternalURl" method="POST">

...

并有“postExternalURl”变量来保存外部 URL。

现在的问题是似乎什么都没有发生。 我看到应用程序加载，我填写了表格，然后按提交 - 我没有得到任何迹象表明正在发生任何事情，并且在我的请求者沙箱中我没有看到任何已注册的分配。 任何人都可以阐明这个问题吗？ 为什么提交失败？ 一般来说 - 在这种情况下我需要做什么 - angular 表格 - 才能提交我作为工人的任务？

谢谢

Answer 1

我解决了这个问题，我发布了解决方案供任何人使用，如果他们遇到与我相同的情况。

HTML 表格。 为了使这种形式在 Mechanical Turk 中作为外部问题工作（至少根据我的经验），该形式需要采用老式的 html 形式，而不是 angular 反应式形式。

在我的案例中，表单的定义需要是：

<form  #form ngNoForm [formGroup]="formName" [action]="postExternalURl" method="post">

现在，为了让 Mechanical turk 注册提交，必须调用方法“form.submit()”（您可以将“form”替换为您在表单定义行中命名的#）。 您可以直接从提交按钮执行此操作：

<button mat-raised-button color="primary" type="submit"
                                    [disabled]="!formName.valid" (click)="form.submit()">Submit</button>

但是如果你需要在提交表单之前使用更多的逻辑，你可以将 HTML 中的按钮定义更改为：

<button mat-raised-button color="primary" type="submit"
                                [disabled]="!formName.valid" (click)="onSubmit(form)">Submit</button>

并在“onSubmit”方法中调用“form.submit()”。

就是这样。 当我将此表单作为外部问题加载到 Mechanical Turk 中时，提交工作正常。