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

[lukasarich]

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!

[ghost]

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

[qiuhanWEI]

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

[mckennapsean]

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]

@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.

[PhilippeZuber]

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

[mckennapsean]

Have you tried any of the recommended solutions?

[NaturalDevCR]

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.

[PhilippeZuber]

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

[ignacio-thfoot]

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?

[mckennapsean]

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.

[ignacio-thfoot]

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 <#358 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AQZ4DEDZ6LTXCI7DEGBTSQ3SJNBLBANCNFSM4KWH3LDQ> .

[samyakv]

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

[mckennapsean]

🤷 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]

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?

[samyakv]

Hey, Thanks a lot

…

On Sun, 31 Jan 2021 at 06:45, Sean McKenna ***@***.***> 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 <#358 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AON325ND77DX654EWGKWHU3S4SVJPANCNFSM4KWH3LDQ> .

[kylejohnsonkj]

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.

[mejsler]

click "run" to execute the script inside the editor
which one exactly?

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.

[kylejohnsonkj]

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

[mckennapsean]

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 :)

[illycz]

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

[Kato669]

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

[mckennapsean]

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.).

[bledatunay]

• 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.