为什么Perl CGI编写的微API通过fetch调用时无响应体？

问题原因 #

你遇到的问题核心由fetch的mode: 'no-cors'配置导致：
no-cors是专为不需要读取响应内容的跨域请求设计的模式（比如上报埋点、预加载资源），该模式下返回的响应为*opaque（不透明）*类型，你无法读取响应体、响应状态码等任何内容，所以才会出现body为null、转JSON时报SyntaxError: Unexpected end of input的问题。
浏览器地址栏直接访问、curl请求不受跨域规则限制，所以可以正常拿到响应内容。

修复方案 #

1. 调整前端fetch配置 #

删掉mode: 'no-cors'配置即可（fetch默认mode为cors，专门用于跨域读取响应），另外GET请求没有请求体，Content-Type: application/json头也可以一并删除，避免触发不必要的OPTIONS预检请求：

async function saveData(url = '', data = {}) {
  const response = await fetch(url, {
    method: 'GET', 
    cache: 'no-cache', 
    credentials: 'omit',
    redirect: 'follow', 
    referrerPolicy: 'no-referrer', 
  });
  console.log(response);
  return response.json(); 
}

2. 服务端添加CORS响应头 #

在Perl CGI的header输出部分添加跨域允许头，否则修改mode后会报跨域错误：

print $q->header( 
  -status   => $status, 
  -type     => $type,
  -charset  => $charset,
  -Access_Control_Allow_Origin => '*' # 生产环境建议替换为前端实际域名
);

内容的提问来源于stack exchange，提问作者w.k