在CodePen中调用localhost后端接口出现报错是什么原因？

正确调用代码示例 #

fetch(`http://localhost:5000/products`)
    .then(response => response.json())
    .then(data => console.log(data))
    .catch((error) => {
      console.error('Error:', error);
});

调用失败的核心原因 #

• URL格式错误
  当前传入的地址缺少HTTP协议前缀，浏览器会将其识别为相对于CodePen页面的相对路径，实际请求地址会被拼接为CodePen域名+你填写的路径，无法命中本地服务，补全http://前缀即可解决该问题。
• 跨域资源共享限制
  CodePen页面的运行域名和本地服务域名属于不同源，浏览器默认会拦截跨域请求，需要在本地后端服务中配置CORS规则，允许来自CodePen域名的请求访问。
• 混合内容安全拦截
  CodePen为HTTPS站点，本地服务如果是HTTP服务，现代浏览器会默认拦截HTTPS页面发起的未加密HTTP请求，你可以给本地服务配置SSL证书切换为HTTPS访问，也可以临时调整浏览器安全策略允许该类请求。

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