从外部问题(angular 表单)发布到 Mechanical Turk 失败或什么都不做

posting to mechanical turk from external question (angular form) fail or does nothing

我有外部 angular 应用程序用作 AWS Mechanical Turk 中的外部问题。我在这个 angular 应用程序中有一个表单,我尝试按照 AWS 的文档提交它: external form documentation.

据我了解,目标是将表单提交到此地址:

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

当我尝试使用 http 客户端 post 到这个地址时,像这样:

HTML:

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

TS,在提交中:

// 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 表格 - 才能提交我作为工作人员的任务?

谢谢

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

HTML 形式。 为了使这种形式在 Mechanical Turk 中作为外部问题工作(至少根据我的经验),形式需要采用 old-school html 形式,而不是 angular 反应式形式.

在我的案例中,表单的定义需要是:

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

现在,为了让 Mechanical Turk 注册提交,方法“form.submit()”(您可以将“表单”替换为您在表单定义行中命名 # 的任何方式)必须是叫。您可以直接从提交按钮执行此操作:

<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 中加载此表单作为外部问题时,提交工作正常。