ajax post to external service with proper request headers

Question

I am using an external service (emailmeform.com) to handle my contact forms on my site. The only real issue with this service is that there is no public api access to perform server requests to using AJAX. So the only way to send my forms (that I know of) is to just execute submit() and let the form build up its request headers normally, send the data, and let the response redirect me to a static page I provide in emailmeform.com's form manager.

But what I'm really wanting to do is (in this order):

Use AJAX to POST the form to my OWN server
If response is OK, POST the form to emailmeform's server
If response is OK, let my server handle it from there (dont redirect me automatically).

I have already completed #1 above. Here is my code:

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);
      }
    });
  });

The form HTML is generated automatically, using an embed code provided to me through emailmeform. This form contains lots of javascript logic, which I guess generates the proper headers for the POST request. So if I were to POST to the form action using submitForm(), I get an error:

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.

Yes. I am posting using my local dev server (if that matters).

So I guess my question is, how would I POST my form data to emailmeform's servers with the correct request headers? The logic is here in my form code... but I cant make sense of it to make my own request!

You can't use AJAX to post to another domain unless their server explicitly allows it. — Barmar, Dec 08 '16 at 18:51
Why do you think you're not sending the correct request headers? There are no request headers that allow you to send a cross-domain request. `Access-Control-Allow-Origin` is a **response** header, it's set by the server. — Barmar, Dec 08 '16 at 18:53
There are many questions here and on other sites about cross-domain AJAX, I suggest you read up on it. — Barmar, Dec 08 '16 at 18:54

score 0 · Accepted Answer · edited May 23 '17 at 12:13

0

I had same problem some times ago. This is usualy happens when you try to make some actions to another server, because for default you can't make external queries like this. You need setup your server. I think here is a good answer for that and that helped me.

edited May 23 '17 at 12:13

Community

1
1

answered Dec 08 '16 at 18:03

Ali S. Veliyev

53
9

thanks! using the iframe method works (submits and doesnt refresh the page), but its risky knowing I cannot receive a success response from it. – amcardwell Dec 08 '16 at 19:39

ajax post to external service with proper request headers

1 Answers1