Hi @francisconeves97 how do I get pass the CORS issue from the function googleFormsToJson. Cant seem to obtain the json needed

francisconeves97 / react-google-forms-hooks

Build a UI for your Google Forms using React.

https://francisconeves97.github.io/react-google-forms-hooks/

32 stars 10 forks source link

Hi @francisconeves97 how do I get pass the CORS issue from the function googleFormsToJson. Cant seem to obtain the json needed #30

Open thesneakerhead opened 1 year ago

francisconeves97 commented 1 year ago

Hey @thesneakerhead! The CORS issue arises from your browser blocking cross domain requests, and since you are requesting google's domain from your domain, an exception will be raised by the browser.

To mitigate this issue I think you have two options:

During build time, you create a node script that fetches the google form and creates the json (example here: https://github.com/francisconeves97/react-google-forms-hooks/blob/master/example/src/scripts/getGoogleForm.js)
Other option is to have a backend server owned by you, that calls googleFormsToJson and returns to your react application the form's json

thesneakerhead commented 1 year ago

Hi I'm receiving the below error from trying the first option

throw new Error("Invalid form. Couldn't find fbzx field.");
      ^

Hi I'm receiving the below error

Error: Invalid form. Couldn't find fbzx field. at extractFormData (C:\Users\jacob\OneDrive\Desktop\YuxiIsaacRSVPFrontend\rsvp-frontend\node_modules\react-google-forms-hooks\dist\index.js:469:11) at _temp3 (C:\Users\jacob\OneDrive\Desktop\YuxiIsaacRSVPFrontend\rsvp-frontend\node_modules\react-google-forms-hooks\dist\index.js:661:22) at processTicksAndRejections (node:internal/process/task_queues:96:5) at async run (C:\Users\jacob\OneDrive\Desktop\YuxiIsaacRSVPFrontend\rsvp-frontend\src\scripts\getGoogleForm.js:13:18)

mikemajara commented 1 year ago

Hey @thesneakerhead it's hard to give guidance on short sentences lacking references. Please add links to your code, add code snippets and share an example that we can reproduce either in CodeSandbox, or in a git repo of yours that can be cloned.

Bear in mind that showing effort and research in your questions and answers will yield better help in this or any other forum.

With that being said, the CORS issue is well documented as a common error, and there are plenty of answers you can help yourself with. You'll find some suggest that you use plugins or workarounds that allow CORS requests – I advise against that. I advise you try to understand the problem, and do it the right way.

jere-co commented 1 year ago

Hi I'm receiving the below error from trying the first option
throw new Error("Invalid form. Couldn't find fbzx field.");
      ^
Hi I'm receiving the below error

Error: Invalid form. Couldn't find fbzx field. at extractFormData (C:\Users\jacob\OneDrive\Desktop\YuxiIsaacRSVPFrontend\rsvp-frontend\node_modules\react-google-forms-hooks\dist\index.js:469:11) at _temp3 (C:\Users\jacob\OneDrive\Desktop\YuxiIsaacRSVPFrontend\rsvp-frontend\node_modules\react-google-forms-hooks\dist\index.js:661:22) at processTicksAndRejections (node:internal/process/task_queues:96:5) at async run (C:\Users\jacob\OneDrive\Desktop\YuxiIsaacRSVPFrontend\rsvp-frontend\src\scripts\getGoogleForm.js:13:18)

On Google Forms, make sure under Settings / Responses / REQUIRES SIGN IN the Restrict to users in <organization> and its trusted organizations is unchecked.