learn-to-send-email-via-google-script-html-no-server icon indicating copy to clipboard operation
learn-to-send-email-via-google-script-html-no-server copied to clipboard

Getting 'CORS policy' error in console when I submit my form

Open lukasarich opened this issue 4 years ago • 23 comments

I've followed all the instructions to implement the form-data-submission code to my already existing bootstrap form. I've added name attributes that are the same as the headers of my spreadsheet. However, when I go on my website and submit my form, I get this error message in the console.

Access to XMLHttpRequest at 'https://script.google.com/macros/s/AKfycbzBssUcA9Zn4FQByzo2RMqlJugYusfQEAmGSY_p4w/exec' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I also get another error message saying 'Failed to load resource: net::ERR_FAILED ... and then my Google Script link'

Why won't it read my google script link, and how do I unblock the CORS policy. Someone please, lend a brother in need a hand. Any advice would be greatly appreciated!

lukasarich avatar Feb 16 '20 23:02 lukasarich

I believe you may need at add "Access-Control-Allow-Origin: website url" to a specific line like shown here: https://github.com/caverym/caverym.github.io/commit/b354e57d2aa22e98dc918cf093d5cdd9a4e8a7c4 image

ghost avatar Feb 17 '20 00:02 ghost

I have the same CORS problem. I check the Response Header and find there is no access-control-allow-origin: * returned.

qiuhanWEI avatar Mar 06 '20 09:03 qiuhanWEI

CORS issues have been widespread. #113 #124 #125 #154 #346

I’ve never successfully reproduced this so fixing it is tricky. It also seems like there are different issues.

Calling another site’s JS from the html on another site? Put the JS on the same site.

Sheet permissions, copy out sheet to start don’t start from new.

Script permissions, must be “anyone even anonymous”.

GSuite enterprise users may not be able to get this to work. It could be locked down by domain settings. So try a personal account.

Adding headers can be one way to solve it - but don’t just use * unless you fully understand the security implications. See the latest issue in the list above for more info.

Anyway - hope that helps.

mckennapsean avatar Mar 06 '20 14:03 mckennapsean

@vanpariyar thanks for the link!

which answer on that page helped you?

A) (Asker's solution) I'm not certain what postData is, we use parameters on the server to process the form data, and this would cause other issues if it was incorrect.

B) (Answer, 1.) Serverside doPost does return, even if an exception is caught, only our doGet is not defined but that shouldn't be called.

C) (Answer, 2.) We chose here not to support fetch #131 since cross-browser support would require more polyfills than we wanted to include here. Not sure if anything has changed here.

mckennapsean avatar Mar 25 '20 01:03 mckennapsean

I have the same issue and would need more specific help.

PhilippeZuber avatar Apr 14 '20 11:04 PhilippeZuber

Have you tried any of the recommended solutions?

mckennapsean avatar Apr 14 '20 13:04 mckennapsean

I had the same issue, but i was trying to send a base64 encoded image as part of my form, and that triggered the cors issue, i removed that and voilá, worked again flawlessly, it would be nice to know how to save an image let's say to google drive specific folder, and then save it's link to the cell in google sheets.

NaturalDevCR avatar May 17 '20 22:05 NaturalDevCR

Sorry for not having given more details. In the meantime I now use a database directly instead.

PhilippeZuber avatar May 19 '20 18:05 PhilippeZuber

Hi! thanks for the code. It is true that Gsuite accounts don't work the same way , right? access permissions are a lot more strict so I get errors 401 (post) and 302 (get). Any ideas how to work it out?

ignacio-thfoot avatar Oct 06 '20 07:10 ignacio-thfoot

I’ve heard it can be different for GSuite, but last I tested it worked on my account. Admins may have a way to control what permissions levels that scripts may receive.

mckennapsean avatar Oct 06 '20 16:10 mckennapsean

Yep that was my doubt People whom I share the sheet with (edit rights) cannot run the script associated...

Le mar. 6 oct. 2020 à 18:34, Sean McKenna [email protected] a écrit :

I’ve heard it can be different for GSuite, but last I tested it worked on my account. Admins may have a way to control what permissions levels that scripts may receive.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server/issues/358#issuecomment-704401117, or unsubscribe https://github.com/notifications/unsubscribe-auth/AQZ4DEDZ6LTXCI7DEGBTSQ3SJNBLBANCNFSM4KWH3LDQ .

ignacio-thfoot avatar Oct 06 '20 16:10 ignacio-thfoot

These don’t seem to work for me either. Is there another way around ? @mckennapsean

samyakv avatar Dec 30 '20 10:12 samyakv

🤷 often, this tends to be an issue more from how the resources are hosted / where the files are and whether the appropriate requests are setup, or possibly something about communicating with Google's servers. Any one specific issue is likely nothing related to this tutorial or the resources of this tutorial, and you would likely have better luck posting about the issue on a site like StackOverflow or debugging yourself, tbh.

I'd lean toward closing this issue as I don't really know how more to help on my end. We could add some general resources into the tutorial/FAQ's at the end, but idk about anything more than that.

mckennapsean avatar Jan 31 '21 00:01 mckennapsean

My thoughts on action items here:

  1. anyone having issues can post a reproducible example of the issue for anyone to investigate - without this, we cannot assist (and any assistance may be outside the requirements of the tutorial / could be done on sites like StackOverflow)
  2. we update the README with a FAQ linking to some of these threads and "here be dragons"
  3. close this and future issues around CORS issues, pointing to the FAQ

What do folks think?

mckennapsean avatar Jan 31 '21 01:01 mckennapsean

Hey, Thanks a lot

On Sun, 31 Jan 2021 at 06:45, Sean McKenna [email protected] wrote:

My thoughts on action items here:

  1. anyone having issues can post a reproducible example of the issue for anyone to investigate - without this, we cannot assist (and any assistance may be outside the requirements of the tutorial / could be done on sites like StackOverflow)
  2. we update the README with a FAQ linking to some of these threads and "here be dragons"
  3. close this and future issues around CORS issues, pointing to the FAQ

What do folks think?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server/issues/358#issuecomment-770308343, or unsubscribe https://github.com/notifications/unsubscribe-auth/AON325ND77DX654EWGKWHU3S4SVJPANCNFSM4KWH3LDQ .

samyakv avatar Feb 01 '21 04:02 samyakv

I was able to solve this. Adding the Access-Control-Allow-Origin: url/* did nothing for me, even though the error message from the console would lead you in that direction.

Instead you need to

  1. go to https://script.google.com/home
  2. open the project containing your script
  3. click "run" to execute the script inside the editor

It will ask you for authorization to run from your google account. After giving approval the script works fine again. No code changes required.

kylejohnsonkj avatar Mar 13 '21 02:03 kylejohnsonkj

click "run" to execute the script inside the editor which one exactly? image Edit: Seems like the issue only persist on local IP address but not on actual live site. Also be aware of browser extension "Privacy Badger" blocking Google script, that's why it might not work for you.

mejsler avatar Jul 29 '21 16:07 mejsler

@mejsler looks like you're using the legacy editor, so I'm not sure. there's no dropdown menu on the latest one

kylejohnsonkj avatar Aug 01 '21 02:08 kylejohnsonkj

Has the solution posted help fix the CORS issues others were getting on their form?

That's a good callout that ad/privacy blockers may also affect the ability to load and work with JS on your site :)

mckennapsean avatar Aug 15 '21 00:08 mckennapsean

@kylejohnsonkj's tip for repeating authorization works for me.

illycz avatar Aug 23 '21 13:08 illycz

guys i have the same issue but i have failed to fix it and if anyone can help me on how to submit the form to email I will be grateful

Kato669 avatar Jan 07 '22 07:01 Kato669

have you tried repeating authorization?

at this point, I may look to close this thread, unless we can identify any steps / tips we would like to add to the tutorial to help if others get stuck in the future with this (maybe posting some resources, the tip about repeating authorization, etc.).

mckennapsean avatar Jan 09 '22 20:01 mckennapsean

  • Make sure JavaScript is enabled on the client side.
  • Make sure there are no script blockers like "NoScript" or "Privacy Badger" on the client side.
  • Try giving different class / id names for your styles, as some ad blockers like "AdBlock Plus" or "uBlock Origin" are actually blacklisting phrases. For instance, if the class of your form container includes the phrase "social", these blockers may block anything related to that container.
  • Make sure gscript implementation is absolutely correct, as a wide variety of errors show up as CORS in my own experience.
  • Make sure "Who has access to the app" property of your gscript is set to "Anyone, even anonymous".
  • Make sure you deployed the latest version of your webapp.

That's about it. I'm 99.9% sure that the list above solves all problems.

bledatunay avatar Feb 06 '22 21:02 bledatunay