为什么会有那么多Script Error错误
错误监控作为开发日常的工作保证，但却经常在错误平台看到的是这种莫明其妙，少得可怜的错误信息，让人无从下手
TL;DR
- 引出
Script Error错误，是由于浏览器的同源策略，对于跨域的脚本捕获的错误，只会输出如此简短一句； - 既然是同源策略，就祭出
CORS宝典，给JS请求返回Access-Control-Allow-Origin: *，就可以解决了；
产生Script Error的原因
浏览器在同源策略限制下，出于安全上的考虑，页面无权限获取异常详情， 只输出 Script error 的错误信息。
在 webkit 的源码里可以看到 Script error的输出过程，从下面的代码看到，
canIncludeErrorDetails判断Origin请求头是不是同源dispatchErrorEvent抛出错误详情，抛出方式由上面的同源与否来决定
bool ScriptExecutionContext::dispatchErrorEvent(const String& errorMessage, int lineNumber, int columnNumber, const String& sourceURL, JSC::Exception* exception, CachedScript* cachedScript)
{
auto* target = errorEventTarget();
if (!target)
return false;
RefPtr errorEvent;
if (canIncludeErrorDetails(cachedScript, sourceURL))
errorEvent = ErrorEvent::create(errorMessage, sourceURL, lineNumber, columnNumber, { vm(), exception ? exception->value() : JSC::jsNull() });
else
errorEvent = ErrorEvent::create("Script error."_s, { }, 0, 0, { });
// other code
}
// FIXME: Should this function be in SecurityContext or SecurityOrigin instead?
bool ScriptExecutionContext::canIncludeErrorDetails(CachedScript* script, const String& sourceURL)
{
ASSERT(securityOrigin());
if (script) {
ASSERT(script->origin());
ASSERT(securityOrigin()->toString() == script->origin()->toString());
return script->isCORSSameOrigin();
}
return securityOrigin()->canRequest(completeURL(sourceURL));
}
复制代码CORS的解决方案
其实很简单，给JS请求返回Access-Control-Allow-Origin: *，浏览器就能正常通过window.onerror来捕获详细的错误鸟~
- nginx上的配置
location ~* \.js$ {
add_header access-control-allow-origin *;
}
- 设置
*会不会有什么安全问题呢，没想出来会有什么安全问题(如果有想到的可以留言说下)，JS脚本本来就是可以跨域请求的。看了下淘宝，也是这么干的
- 如何根据请求源，动态判断要不要返回
Access-Control-Allow-Origin呢
正常情况下，跨域JS请求是不会发送Origin请求头，我们在script标签里加上crossorigin属性就可以使浏览器发送了。 然后服务器就可以根据Origin头部来判断来者何人鸟
<script src="other-domain.com/path/to/s.js" crossorigin>script>
复制代码参考文章：
webkit: trac.webkit.org/browser/tru…
what the heck is 'script error': blog.sentry.io/2016/05/17/…
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录