使用fetch发起no-cors请求JSON数据时出现Unexpected end of input错误求助

这个问题我之前也碰到过，核心原因是你设置了mode: 'no-cors'，这个配置带来的跨域限制直接导致了JSON解析失败。

为什么会出现这个错误？ #

当你在fetch中指定mode: 'no-cors'时，浏览器会出于跨域安全策略，将响应变成opaque response（不透明响应）。这种响应的特点是：

• 你只能知道请求是否成功（比如状态码是200），但完全无法访问响应体的任何内容
• 调用response.json()时，相当于在解析一个空的、无法读取的内容，JSON解析器自然会抛出Unexpected end of input的语法错误——因为根本没有可解析的JSON数据

怎么解决？ #

这里有几个可行的方案，按优先级排序：

1. 移除mode: 'no-cors'并配置CORS（推荐）
   直接去掉这个mode配置，然后让目标服务器（tcokchallenge.com）添加Access-Control-Allow-Origin响应头，允许你的前端域名访问。这是跨域请求的标准解决方案，配置完成后你就能正常读取响应体并解析JSON了。

   修正后的示例代码：

   fetch('http://tcokchallenge.com/admin_cp/test2.json')
     .then(function(response) {
       // 先校验响应状态是否正常
       if (!response.ok) {
         throw new Error(`HTTP error! Status: ${response.status}`);
       }
       return response.json();
     })
     .then(function(data) {
       console.log('Request successful', data);
     })
     .catch(function(error) {
       console.log('Request failed', error);
     });
   

2. 使用代理服务器中转请求
   如果没办法修改目标服务器的CORS配置，可以在你自己的后端搭建一个代理接口：前端请求自己的代理接口，由代理接口去请求目标的test2.json，再把结果返回给前端。这样前端和代理服务器同域，就不存在跨域问题了。

3. 确认目标JSON的有效性
   虽然这不是当前问题的主要原因，但可以顺便检查下test2.json是否返回了格式正确的JSON内容——比如有没有语法错误、是否为空等。

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