使用Fetch向Google Forms发起POST请求出现预检CORS错误如何解决

问题原因 #

Google Forms的公开提交接口本身没有配置跨域允许响应头，受浏览器同源策略限制，前端直接发起的跨域请求会被直接拦截，你修改Content-Type的操作无法解决本质问题——只要是跨域的非简单请求都会触发预检校验，Google服务端没有返回Access-Control-Allow-Origin头就会被浏览器拦截。

可行解决方案 #

方案1：使用no-cors模式（快速实现，无提交状态反馈） #

这是成本最低的纯前端实现方案，不需要额外开发后端逻辑，缺点是无法拿到请求的响应结果，没办法判断提交是成功还是失败，只适合不需要给用户提交反馈的场景。

另外你当前的请求格式本身就不符合Google Forms的要求：它的提交接口不接收JSON格式的请求体，必须用表单格式提交，且参数的键不能随便写，要对应你Google Forms每个问题专属的entry.xxxID，你可以通过预览表单，用浏览器开发者工具抓包原生提交的表单参数拿到这些ID。

修改后的代码示例：

const google_url = "https://docs.google.com/forms/d/e/1FAIpQLScXpwaAVEzgbI7SJfLDAxduZP-3dJRvraiYgxEspA2Kof8-gA/formResponse"        
// 构造FormData对象，键替换为你自己表单对应的entry.xxx ID
const formData = new FormData()
formData.append('entry.123456', handleNameChange) // 姓名对应entry ID
formData.append('entry.234567', handleEmailChange) // 邮箱对应entry ID
formData.append('entry.345678', handleMessageChange) // 留言对应entry ID

fetch(google_url, {
  method: 'POST',
  mode: 'no-cors', // 核心配置，跳过CORS校验
  body: formData
})
.then(() => {
  // 这里只能确认请求发出去了，无法确认提交是否成功
  console.log('提交请求已发送')
})   
.catch(err =>{
  console.log('请求发送失败', err)
})

方案2：通过后端代理转发（推荐，可获取提交状态） #

这是最稳妥的方案，跨域是浏览器特有的安全限制，后端发起HTTP请求没有这个限制。你可以在自己的后端服务上新增一个转发接口，前端先把表单数据传给自有后端，再由后端把请求转发到Google Forms的提交地址，就能完全规避CORS问题，还能拿到Google返回的响应结果，准确判断提交是否成功。

方案3：隐藏iframe表单提交 #

你也可以用传统的隐藏iframe提交方式：创建一个隐藏的form元素和iframe元素，把form的target属性指向隐藏的iframe，提交后页面不会跳转，也不会触发CORS拦截，优缺点和方案1一致，无法获取提交的最终结果。

注意事项 #

• 提交前请确认你的Google Forms已经开启了「任何人都可以提交」的权限，没有设置仅谷歌账号用户可填写
• 必须正确匹配每个表单项对应的entry.xxxID，否则提交的数据无法正确存入Google Forms

内容的提问来源于stack exchange，提问作者Zubair Amjad