ajax发布到具有适当请求标头的外部服务

Question

我正在使用外部服务（emailmeform.com）处理我网站上的联系表单。此服务唯一真正的问题是没有公共api访问权来执行使用AJAX的服务器请求。因此，发送我的表单（我知道）的唯一方法是执行submit（）并让表单正常构建其请求标头，发送数据，并让响应将我重定向到我在emailmeform中提供的静态页面.com的表单管理员。

但我想要做的事情是（按此顺序）：

1. 使用AJAX将表单发布到我的OWN服务器
2. 如果响应正常，请将表单发布到emailmeform的服务器
3. 如果响应正常，请让我的服务器从那里处理它（不要自动重定向我）。

我已经完成了上面的＃1。这是我的代码：

function submitForm(id, action, postData) {
    $.ajax({
      data: postData,
      type: 'POST',
      url: action,
      success: function(data){
        console.log("yay!");
      }
    });
}

$('button[type="submit"]').on('click', function(e) {
    var id = {{ $business->id }},
        form = $('#business-contact-form'),
        action = form.attr('action'),
        postData = form.serialize();

    e.preventDefault(e);

    $.ajaxSetup({
      headers: { 
        'X-CSRF-Token': $('[name="_token"]').val()
      }
    })

    $.ajax({
      data: postData,
      type: 'POST',
      url: "/contact/contact-submit/"+id,
      success: function(data){
        console.log(data);
        form.submit();                  // this works, but redirects me
        // submitForm(id, action, postData);   // this doesn't work
      },
      error: function(data, response){
        console.log('error: '+ response);
      }
    });
  });

使用通过emailmeform提供给我的嵌入代码自动生成表单HTML。这个表单包含大量的javascript逻辑，我想为POST请求生成正确的标题。因此，如果我使用submitForm（）POST到表单操作，我会收到错误：

XMLHttpRequest cannot load http://www.emailmeform.com/builder/form/0o350Mh8Zda. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://trustdale.dev' is therefore not allowed access.

是。我使用我的本地开发服务器发布（如果重要的话）。

所以我想我的问题是，如何使用正确的请求标头将表单数据发布到emailmeform的服务器？逻辑在我的表单代码中...但我无法理解它来提出我自己的请求！

Answer 1

我以前遇到过同样的问题。当您尝试对其他服务器执行某些操作时，通常会发生这种情况，因为默认情况下您无法进行此类外部查询。您需要设置您的服务器。我认为here是一个很好的答案，这对我有帮助。