Ajax Post to guestEntries/saveEntries from another domain

Question

I have a separate Craft install that I am using to communicate to a few different sites. I have a front-end form on another one of these sites (a React.js app) that is looking to post back to this initial Craft install.

My form looks pretty standard:

<form method="post" action="" accept-charset="UTF-8" onSubmit={this.handleSubmit}>
    <input type="hidden" name="action" value="guestEntries/saveEntry"/>
    <input type="hidden" name="sectionId" value="3"/>

    <input id="name" type="text" name="fields[name]" required />
    <input id="userEmail" type="email" name="fields[userEmail]" required/>

    <input type="submit"/>
</form>

handleSubmit() also looks exactly the same as the docs for ContactFormEntries:

handleSubmit(event){
    event.preventDefault();

    var data = $('form').serialize();

    $.post(config.default.apiUrl, data, function(response){
        if(response.success){
            $('body').addClass('success');
        }
        else{
            alert('Sorry, there was an error with your submission. Please validate your submission or try again later.');
        }
    });
}

where config.default.apiUrl = the root url for my Craft app.

My data goes through as a POST request (302 Found) followed by an immediate GET request of '/' (200 OK) where response is the markup from the root of the Craft install.

The kicker is that the data is saved in the database correctly, but the response (and the subsequent GET request) isn't really what I'm looking for. I'd love for it return with a proper json response. I've attempted to include a redirect parameter, but the result is the same.

Is there something I am missing in my ajax request that would throw this off?

Answer 1

TL;DR: Turns out this was an issue with my apache config on the Craft instance.

Explanation: I did a little digging around the GuestEntriesController.php file and noticed that Craft was not picking up that my POST was coming from an ajax request. After looking into that more I manually added the ajax header to my post request:

$.ajax({
    url: config.default.apiUrl,
    type: 'POST',
    data: data,
    headers: {'X-Requested-With': 'XMLHttpRequest'}
}).done(function(){ ... });

This got me a little closer, but now on request I was getting hit with this error:

Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers in preflight response.

That led me to a simple Google search that had the answer in another Stack Overflow question.

In my Craft App's .htaccess file I added in the following 2 headers:

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "X-Requested-With, Content-Type"

Now my POST request from another server fires fine, and Craft returns with a successful json response.