Learn-to-send-email-via-google-script-html-no-server: Another CORS Issue. (Yes, allowed all even anonymous)

[mitchelllewisnelson]

I have been racking my brains with this.

I am deploying the form on a wordpress site. desertsportsmgmt.com/form_test

All code I am using is from the github EXCEPT the last part:

I had to set the src to another location (because of wordpress).

My console prints the following:

---

JQMIGRATE: Migrate is installed, version 1.4.1

Contact form submission handler loaded successfully.

Object { name: "my name", message: "my message", email: "[email protected]", color: "color", formDataNameOrder: "[\"name\",\"message\",\"email\",\"color\"]", formGoogleSheetName: "responses", formGoogleSendEmail: "[email protected]" }

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://script.google.com/macros/s/AKfycbw-hr8A65alhIVHNMZk86wNDq_77YM9yLzC-T7bv-FOaAQg_j9R/exec. (Reason: CORS request did not succeed).[Learn More]

0 form-submission-handler.js:87:11

0 form-submission-handler.js:88:11

---

I don't even know what to ask. Without the form-submission-handler the data is posted fine. With it I get a CORS error.

I have quadruple checked everything and YES, I am allowing anonymous users to access the file.

Any help would be great, and thanks for the awesome tool!

I am using firefox.

[nelsonic]

@mitchelllewisnelson please do the following to help us diagnose/debug this:

1. create a plain .html file on your localhost containing the form and form-submission-handler.js script.
2. open the form on in your web browser (Firefox/Chrome should not matter...) and see if you can submit the form to Google sheets from your localhost
3. if the form submission is successful on your localhost, then try to upload the .html file to your WP web server and continue testing ...

Share your progress.

[mitchelllewisnelson]

I followed your instructions, and you sir @nelsonic are a life saver.

I saved the html and the js file in the same folder, and ran from the localhost and it worked. I then uploaded them into a separate folder on the file server and it worked.

PERHAPS the error was occuring because the JS file was being referenced 'remotely', instead of being in the same folder?

My console output the following:

---

Object { name: "The final name", message: "the final message", email: "[email protected]", color: "PPLELESSAASEE", formDataNameOrder: "[\"name\",\"message\",\"email\",\"color\"]", formGoogleSheetName: "responses", formGoogleSendEmail: "[email protected]" }

200 OK form-submission-handler.js:87:11

200 OK form-submission-handler.js:87:11

{"result":"success","data":"{\"color\":[\"PPLELESSAASEE\"],\"formGoogleSheetName\":[\"responses\"],\"name\":[\"The final name\"],\"formGoogleSendEmail\":[\"[email protected]\"],\"formDataNameOrder\":[\"[\\"name\\",\\"message\\",\\"email\\",\\"color\\"]\"],\"message\":[\"the final message\"],\"email\":[\"[email protected]\"]}"}

200 OK form-submission-handler.js:87:11

{"result":"success","data":"{\"color\":[\"PPLELESSAASEE\"],\"formGoogleSheetName\":[\"responses\"],\"name\":[\"The final name\"],\"formGoogleSendEmail\":[\"[email protected]\"],\"formDataNameOrder\":[\"[\\"name\\",\\"message\\",\\"email\\",\\"color\\"]\"],\"message\":[\"the final message\"],\"email\":[\"[email protected]\"]}"}

---

Would you like any more information related to the results?

[mitchelllewisnelson]

Just now I got the error out of nowhere. Is there a limit for CORS requests to the google webapp?

I checked the quotas on https://script.google.com/macros/dashboard/quota, but I do not see a specification on POST requests. Do you have information on this?

Running the script locally works, but re-uploading to the webserver fails.

[nelsonic]

@mitchelllewisnelson the only thing I can think of is that Google is receiving "too many requests" from the IP address where your form is hosted
Sadly, "spam bots" go searching for "contact us" forms and _abuse_ them. 😞

_or_ the form submission is being blocked by the browser ... 😕
There really shouldn't be any issues with CORS submitting a form via POST ...
you should not be hitting an _quota_ issues either ....

if you can share a link to the "live" form so we can use Dev Tools to help debug directly.
(_you can always edit/remove the link once it's working..._)

[mckennapsean]

More often than not, CORS errors of the type you mentioned come from a failure to load an externally hosted script. Some providers won't let you load other's JavaScript for security reasons.

Thus, you either need to find a way to embed or add the JS to the site (you can put scripts inside HTML) or upload the file to reference on a domain that is not external. Or else you need to change providers. If your provider lets you tweak the headers or security settings then you could try that as well.

[mitchelllewisnelson]

Breakthrough!

This is embarrassing, but hopefully helps someone in the future... Privacy Badger was blocking scripts.google.com.

I realized this because I tried using the form from different machines and different networks etc.. and only my personal laptop was failing. I disabled privacy badger on that page, and it worked.

Thank you @nelsonic and @mckennapsean for your help. This is such an amazing project and I really appreciate your attention on this issue.

[mckennapsean]

More on CORS requests for those interested here: http://performantcode.com/web/do-you-really-know-cors