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)