javascript - Mturk externalQuestion 与 jquery.ajax POST : Access-Control-Allow-Origin error

Question

我正在使用亚马逊的 Mechanical Turk (Mturk) 并尝试提交已完成的任务，以便可以向工作人员展示下一个 HIT。

我使用 externalQuestion，我的服务器存储工作人员输入的所有数据。工作人员完成后，他们单击提交按钮，发送以下 POST:

$.ajax({
  url: self.props.userData.turkSubmitTo + '/mturk/externalSubmit',
  data: {assignmentId:self.props.userData.assignmentId},
  type: 'POST',
  success: function(resp) { console.log('good');},
  error: function(resp, err) { console.log('fail'); console.log(resp); console.log(err);}
});

不幸的是，我收到以下错误:

XMLHttpRequest cannot load https://workersandbox.mturk.com/mturk/externalSubmit?assignmentId=3AMYWKA6YBMSYVY7OGYPJIPCGPK6OK. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://shrouded-plains-8041.herokuapp.com' is therefore not allowed access.

请注意，如果我使用数据类型“jsonp”发布以尝试解决这个明显的跨域问题，那么提交工作正常，但 externalQuestion iframe 不会刷新到下一个 HIT。

我不确定为什么我会遇到这个跨域“Access-Control-Allow-Origin”问题。有什么帮助吗？

Answer 1

我联系了亚马逊的乐于助人的人，他们回答说:

Hi Ben -

I believe the problem is that your code is attempting to get the user's browser to submit an AJAX request to Amazon. Since the page with this code is being generated by your own app on Heroku, the browser does not allow this by default (making AJAX calls from one domain to another).

The solution is to have the code do a form submit, not an AJAX submit. See documentation for JQuery's form submit here: https://api.jquery.com/submit/.

Let me know if that works for you.

Thanks, Taneem

现在是提交代码:

  <rb.Modal.Footer>
    <form name="mturk_form" method="post" id="mturk_form" action={self.props.userData.submitTo + "/mturk/externalSubmit"}>
      <input type="hidden" value='' name="assignmentId" id={self.props.userData.assignmentId}/>
      <rb.Input type="submit" style={{width:'70%', float: "left"}}/>
      <rb.Button onClick={self.props.closeSubmit}>Cancel</rb.Button>
    </form>