Formspree redirect to thanks page is getting CORS Issues

[snasto]

Is this a BUG REPORT or FEATURE REQUEST?: bug

What happened: With formspree after the form post call was succesfull the formspree redirect page "https://formspree.io/thanks" is giving "Access to XMLHttpRequest has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

What you expected to happen: Not getting CORS issue when formspree is successfull

How to reproduce it (as minimally and precisely as possible):

• Setting in the contact fragment formspree
• Succesfully sending the form

Anything else we need to know?:

Environment:

• Syna Theme Starter version: 0.17.4
• Hugo version: 0.74.3/extended windows

[stp-ip]

As far as I can see this is a setting on formspree's side of things. If you have a specific example, we might be able to dig into it more.

[snasto]

I've copied the contact fragment, did some minor changes and added a few more input in the form. I've created the form on formspree and associated with google ReCaptcha. My formspree plan is the free one.

this is my .md

+++
fragment = "contact"
date = "2020-11-18"
weight = 120
form_name = "contact_form"

subtitle  = ""
post_url = "https://formspree.io/f/xxxxxx" #default: formspree.io
button_text = "Invia"
formspree = true
email = "xxxx@yyyy.zz"

[message]
  success = "Messaggio inviato, verrai ricontattato al più presto"
  error = "Impossibile inviare l'email. "

[recaptcha]
  sitekey = "xxxxxxxxxxxxxxxxxxxxxx"
+++

Let me know if you need more info about it

Thanks in advance

[AKhateeb]

I'm facing a similar issue, anyone can add some help?

[gabgg71]

Use libraries that have cors handling, for example if you are using javascript instead of using fetch use axios or jquery, another alternative is to use cors proxy.

const send =(e)=>{
e.preventDefault();
axios.post('https://formspree.io/f/xxxxxxx', new FormData(e.target) )
.then(response => {
        if(response.status===200){
          setTimeout(() => {
            setMsg("Success");
          }, 5000);
        }
      })
      .catch(error => {
        console.log(error)
      });
    }