如何处理返回带payload的JavaScript的fetch()请求？

为什么会出现这种情况？ #

你看到的for(;;);是一种JSON劫持防护手段，常见于不少网站的接口实现。

原理是：如果恶意网站通过<script>标签直接引用这个接口URL，浏览器会执行返回的内容，而for(;;);是一个无限循环，会阻断后续代码执行，从而防止恶意脚本窃取接口返回的敏感数据。但合法的前端请求可以手动处理掉这段前缀，正常解析后面的JSON内容。

另外响应头content-type: application/x-javascript也说明后端返回的是可执行的JS内容，而非标准JSON，所以直接调用.json()会解析失败。

正确获取返回值的方法 #

先把响应转为纯文本，移除开头的for(;;);前缀，再将剩余内容解析为JSON：

fetch(someURL)
  .then(res => res.text())
  .then(text => {
    // 移除开头的for(;;);前缀
    const jsonStr = text.replace(/^for\(\;\;\)\;/, '');
    // 解析为JSON对象
    const data = JSON.parse(jsonStr);
    console.log(data);
  })
  .catch(err => console.error('处理失败:', err));

如果担心前缀有细微格式变化（比如空格），可以用更宽松的正则匹配，比如/^for\s*\(\s*\;\s*\;\s*\)\s*\;/，确保能准确移除防护前缀。

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