嵌入HTML的JS添加mode: 'no-cors'后出现SyntaxError: Unexpected end of input求助

核心问题根源 #

1. 初始CORS错误：浏览器的同源策略拦截了跨域请求，因为目标API服务器https://bulkfollows.com未配置允许你当前域名访问的CORS响应头，导致浏览器拒绝返回请求结果。
2. 添加mode: 'no-cors'后的语法错误：该模式下浏览器会发送请求，但返回的是不透明响应（opaque response）——你完全无法读取响应的任何内容（包括状态码、响应体）。此时调用response.json()必然失败，因为没有可解析的JSON数据，从而抛出SyntaxError: Unexpected end of input。

正确解决步骤 #

1. 立即移除mode: 'no-cors' #

这个模式仅适用于不需要处理返回结果的场景，对你需要获取API响应的需求毫无意义，只会彻底阻断数据读取。

2. 解决CORS问题的可行方案 #

方案一：配置API服务器的CORS规则

如果你有权限操作bulkfollows.com的服务器，需在API响应中添加CORS头，示例如下：

Access-Control-Allow-Origin: 你的域名（或用*允许所有域名）
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: Content-Type

方案二：搭建后端代理服务器

前端无法绕过浏览器同源策略，可通过后端中转请求：

• 前端请求你自己的后端接口（比如/api/proxy）
• 后端接口代为请求https://bulkfollows.com/api/v2，再将结果返回给前端
• 后端不受浏览器同源策略限制，不会触发CORS错误

方案三：本地开发临时调试（仅限开发环境）

如果只是本地测试，可关闭浏览器跨域安全限制：

• Chrome启动时添加参数：--disable-web-security --user-data-dir="C:/ChromeDevSession"（路径可自定义）
• 注意：此方式存在安全风险，仅用于开发调试，禁止日常浏览或生产环境使用

修改后的代码示例（移除no-cors配置） #

<html>
  <body>
<script>

var apiUrl = 'https://bulkfollows.com/api/v2';

var data = {
  key: "key",
  action: "balance"
};

fetch(apiUrl, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.log("Error: " + error));

</script>
</body>
</html>

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