chrome CORB 问题实践
背景:
开发埋点代码,使用<img>标签发送数据,在http://localhost:8080/index.html 页面上发送监控数据到 http://localhost:3010/track_data,chrome 浏览器报错:Cross-Origin Read Blocking (CORB) blocked cross-origin response(尝试了firefox浏览器未见报错)
报错信息:
Cross-Origin Read Blocking (CORB) blocked cross-origin response http://localhost:3010/track_data?a=XXX&b=XXX with MIME type image/gif. See https://www.chromestatus.com/feature/5629709824032768 for more details
原因:
请求头: Accept:image/webp,image/apng,image/*,*/*;q=0.8
响应头:Content-Type:image/gif; charset=utf-8
但是返回的是 json 格式:(当时想的是直接能收数就得 没想那么多,后来看报错了才一顿查)
app.get('/track_data',function(req,res) { console.log('请求', req.url); res.status(200); res.json({ str: '收数测试' }); });
解决办法:
获取数据的时候返回相应的格式。
我自己搭建的是node + express, 用
app.use(express.static(__dirname + '/assets'));
指定静态文件路径,然后相应的地方有个文件就完事了
问题完美解决!
相关的原理涉及到了一些安全相关的东西,比较多,移步: