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'));

指定静态文件路径，然后相应的地方有个文件就完事了

 

问题完美解决！

相关的原理涉及到了一些安全相关的东西，比较多，移步：

Cross-Origin Read Blocking (CORB)