告别 “Script Error” 的另类思路

前端

2024-02-23 12:14:33

众所周知，前端小伙伴们借助 window.onerror 事件进行监控时，都会遇到跨域脚本恼人的提示：“Script Error”。这种情况下，无论是具体错误信息还是堆栈信息，都无法获取。

为此，笔者为大家准备了一个小实验，旨在深入剖析这一问题。事不宜迟，让我们开始实验准备：

搭建一个 Node 应用作为静态服务器
通过 <script> 标签引入远程脚本

揭开跨域脚本的真面目

当跨域脚本尝试执行时，浏览器会弹出令人头疼的 “Script Error” 提示。这是什么原因呢？让我们来一探究竟。

在同源策略的限制下，浏览器出于安全考虑，禁止不同源的脚本相互交互。当跨域脚本试图访问本地资源时，浏览器会阻止这一行为，并抛出 “Script Error” 错误。

另辟蹊径：巧用代理服务器

既然无法直接获取跨域脚本的错误信息，那我们不妨另辟蹊径。我们可以借助代理服务器，将跨域请求转发到本地服务器，从而规避同源策略的限制。

代理服务器的工作原理如下：

客户端向代理服务器发送跨域请求
代理服务器将请求转发到目标服务器
目标服务器响应代理服务器
代理服务器将响应转发回客户端

通过这种方式，客户端就可以绕过同源策略的限制，直接获取目标服务器的响应内容，进而获取跨域脚本的错误信息和堆栈信息。

实际操作：搭建本地代理服务器

使用代理服务器解决 “Script Error” 问题并不复杂。以下是如何搭建本地代理服务器：

安装 Node.js 和 Express.js
创建一个新的 Node.js 项目
安装 http-proxy 模块
编写代理服务器代码

代理服务器代码如下：

const express = require('express');
const httpProxy = require('http-proxy');

const app = express();

const proxy = httpProxy.createProxyServer({});

app.use((req, res, next) => {
  proxy.web(req, res, { target: 'https://example.com' });
});

app.listen(8080);