使用Quagga JS调用barcode.monster API返回opaque错误如何解决

• 你在fetch请求中主动配置了mode: 'no-cors'参数，该模式的设计初衷是用于不需要读取响应内容的跨域场景（比如前端埋点上报），该模式下浏览器返回的opaque类型响应会完全屏蔽响应体、状态码、响应头等内容的访问权限，所以你调用json()、text()方法都会报错或拿到空值，这是你当前问题的直接诱因。
• 你会选择添加no-cors配置的本质原因是barcode.monster的API服务端没有配置CORS跨域允许规则，你的前端页面所属的域名不在其允许访问的白名单中，直接发送常规请求会被浏览器的同源策略拦截，报跨域资源共享错误。

• 第一步先删除fetch配置中的mode: 'no-cors'参数，先拿到浏览器返回的真实跨域报错，同时排查你的请求路径、参数、请求头是否存在配置错误。
• 若该API官方支持JSONP调用方式，可以改用JSONP方案实现数据请求，注意原生fetch不支持JSONP，需要通过动态注入script标签或者第三方JSONP工具库来实现。
• 开发阶段调试可以在本地构建工具的配置中添加代理规则，比如Vite、Webpack的devServer都支持代理配置，将本地/api前缀的请求转发到https://barcode.monster/api/，即可规避开发环境的跨域问题。
• 生产环境部署需要你自行搭建后端中转服务，由后端服务向barcode.monster发送请求获取条码数据，再将结果返回给前端，后端发起的HTTP请求不受浏览器同源策略限制，可以正常获取到完整响应。

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