Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
lukasarich opened this issue Feb 16, 2020 · 23 comments
Open

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

lukasarich opened this issue Feb 16, 2020 · 23 comments

Comments

@lukasarich
Copy link

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
Copy link

ghost commented Feb 17, 2020

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

@qiuhanWEI
Copy link

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

@mckennapsean
Copy link
Collaborator

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
Copy link
Collaborator

@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
Copy link

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

@mckennapsean
Copy link
Collaborator

Have you tried any of the recommended solutions?

@NaturalDevCR
Copy link

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
Copy link

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

@ignacio-thfoot
Copy link

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
Copy link
Collaborator

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
Copy link

ignacio-thfoot commented Oct 6, 2020 via email

@samyakv
Copy link

samyakv commented Dec 30, 2020

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

@mckennapsean
Copy link
Collaborator

🤷 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
Copy link
Collaborator

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
Copy link

samyakv commented Feb 1, 2021 via email

@kylejohnsonkj
Copy link

kylejohnsonkj commented Mar 13, 2021

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
Copy link

mejsler commented Jul 29, 2021

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.

@kylejohnsonkj
Copy link

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

@mckennapsean
Copy link
Collaborator

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
Copy link

illycz commented Aug 23, 2021

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

@Kato669
Copy link

Kato669 commented Jan 7, 2022

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
Copy link
Collaborator

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests