Nuxtjs环境下ReCAPTCHA验证触发SyntaxError错误如何解决

报错直接诱因 #

你现在遇到的Unexpected end of input报错是mode: 'no-cors'配置直接导致的：

• 开启no-cors模式后，浏览器会限制你读取跨域请求的返回内容，响应体被直接置为空，调用.json()解析空内容自然会抛出语法错误
• 你写的try/catch只能捕获同步执行阶段的异常，fetch异步Promise链里的报错不会被它捕获，需要在Promise链末尾追加.catch()才能捕获这类异常

同时你的代码还存在两个隐性错误：

1. 请求URL里的response参数写死成了字符串token，没有替换成实际拿到的token变量值，相当于你传的验证token永远是无效的
2. reCAPTCHA的siteverify接口本身就不允许前端直接调用，谷歌做了跨域限制，而且secret密钥属于敏感信息，直接写在前端代码里会被任意用户扒取，存在被滥用的风险。

正确实现方案 #

你使用的是Nuxt.js框架，直接用自带的服务端接口做转发即可：

1. 在Nuxt项目的server/api目录下新建recaptcha-verify.js接口文件，代码示例：

export default defineEventHandler(async (event) => {
  const { token } = await readBody(event)
  const res = await fetch('https://www.google.com/recaptcha/api/siteverify', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: new URLSearchParams({
      secret: '你的secret密钥',
      response: token
    })
  })
  return await res.json()
})

2. 前端代码修改为调用本地服务端接口，移除no-cors配置，修正参数拼接逻辑：

try {
  const token = document.querySelector('#g-recaptcha-response').value;
  fetch('/api/recaptcha-verify', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ token })
  })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => console.log('请求错误：', err));
} catch (err) {
  console.log('同步错误：', err);
}

如果只是临时学习测试不想写服务端代码，可以暂时用本地跨域代理工具绕开限制，但生产环境绝对不能直接在前端调用siteverify接口、绝对不能暴露secret密钥。

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