解决 "Script Error" 的另类思路

本文由小芭乐发表

前端的同学如果用 window.onerror 事件做过监控,应该知道,跨域的脚本会给出 "Script Error." 提示,拿不到具体的错误信息和堆栈信息。

这里读者可以跟我一起做一个实验,来深入了解这个事情。先做一下实验准备:

app.js

创建一个 Node APP,只做静态服务器,提供两个端口用于做跨域实验。

const express = require('express');

const app = express();

app.use(express.static('./public'));

app.listen(3000);
app.listen(4000);
复制代码

public/index.html

创建一个静态页面,监听 window.onerror 事件,并且输出事件的堆栈。同时分别加载两个域的 JS 文件。




  
  
  Script Error Test
  


  
  
  

  
复制代码

public/at3000.js

创建一个在 3000 端口执行的脚本,监听 3000 按钮的点击事件,并且抛出一个异常:

const btn3k = document.querySelector('#btn-3000');
btn3k.addEventListener('click', () => {
  throw new Error('Fail 3000');
});
复制代码

public/at4000.js

同样的,创建一个在 4000 端口执行的脚本:

const btn4k = document.querySelector('#btn-4000');
btn4k.addEventListener('click', () => {
  throw new Error('Fail 4000');
});
复制代码

复现 Script Error

这个时候,我们启动 Node APP:node app.js,然后访问 http://127.0.0.1:3000

分别点击按钮 3000 和 4000,我们发现,同域下面的 3000 按钮点击后,异常消息可以捕获到。而跨域的 4000 按钮,只有一个 Script Error。

点击 3000 按钮

点击 4000 按钮

我们复现了 "Script Error."!

有同学举手,我知道,只要加一个跨域头就可以了!

Access-Control-Allow-Origin

没错,我们可以给静态文件服务器加上跨域协议头:

app.use(express.static('./public', {
  setHeaders(res) {
    res.set('access-control-allow-origin', res.req.get('origin'));
    res.set('access-control-allow-credentials', 'true');
  }
}));
复制代码

同时,加载 JS 的时候,加上跨域声明:


                    
                    

你可能感兴趣的:(解决 "Script Error" 的另类思路)