Getting around CORS with embedded google forms

Question

I'm trying to send form data to google via an embedded form.

I found this post that seems to answer my question but I'm getting CORS errors. Is there a way to solve this?

Other posts seem to say that CORS isn't an issue but I'm getting the errors.

Here is my code:

-JS-

function ajax_post() {
  var field1 = $('#email').val();

  $.ajax({
      url: "https://docs.google.com/forms/d/e/xxxxxxxxxxxxxxxxxxxxxx/formResponse",
      data: {"entry.xxxxxxxxxx": field1},
      type: "POST",
      dataType: "xml",
      statusCode: {
          0: function() {
          //Success message
          },
          200: function() {
          //Success Message
          }
      }
  });
}

-HTML-

<form id="emailForm" target="_self" onsubmit="" action="javascript: ajax_post()">
    <input id="email" type="text" autocomplete="off" tabindex="0" name="entry.xxxxxxxxxx" required>
    <button id="send" type="submit">Submit</button>
</form>

Answer 1

The “No 'Access-Control-Allow-Origin' header is present on the requested resource” message indicates that responses from https://docs.google.com/forms/d/e/xxxx/formResponse URLs currently don’t include the Access-Control-Allow-Origin response header, so browsers won’t allow your frontend JavaScript code to access the response.

Given that, I guess from your frontend code there’s no way you can tell whether the POST request succeeds or not. But barring any other problems, it seems like the request will always succeed. If the request doesn’t reach the server at all (due to some network error) then you’ll hit a different failure condition that is observable from your frontend code so you can actually catch it.

So I guess the way you know the request has successfully reached the server is just that you don’t get any other failure that’s observable from your frontend code.