Script error.解决方案

小编推荐： Fundebug提供JS、微信小程序、微信小游戏，Node.js和Java错误监控。真的是一个很好用的错误监控服务，众多大佬公司都在使用。

为了加快网站访问速度，我们不可避免要将静态资源放到第三方CDN上。然而，我们又需要在出错以后能够知道详细的报错信息，这篇博客将介绍如何避免出现Script error.

1. 添加 crossorigin="anonymous" 到script标签

<script src="https://xxx.com/xxx.js" crossorigin="anonymous"></script>

crossorigin可以取枚举值anonymous或则use-credentials。

The “anonymous” keyword means that there will be no exchange of user credentials via cookies, client-side SSL certificates or HTTP authentication

anonymous即不发送Cookie和HTTP认证信息，对于静态资源，我们使用anonymous就已经足够。 关于crossorigin详情可以参考: CORS settings attributes

2. 添加支持跨域访问的设置

Access-Control-Allow-Origin: *

Access-Control-Allow-Origin是HTML5中定义的一种解决资源跨域的策略。他是通过服务器端返回带有Access-Control-Allow-Origin标识的Response header，用来解决资源的跨域权限问题。

CDN服务商比如七牛默认已经配置好了Access-Control-Allow-Origin，使用curl命令获取头部：

curl --head https://js.fundebug.cn/fundebug.0.0.4.min.js | grep "Access-Control-Allow-Origin"

结果如下:

如果您有单独的子域名(子域名也会被认定为不同源)用来分发静态资源，那么需要在服务端做一点配置。针对不同语言和框架的配置方法我们不一一列出，Nodejs的Express框架下是这样配置的：

app.use(function(req, res, next)
{
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
    next();
});

其它设置Access-Control-Allow-Origin请参考

• PHP: ajax 设置Access-Control-Allow-Origin实现跨域访问
• Java: Java 无法跨域问题（No ‘Access-Control-Allow-Origin’…）
• Nginx: nginx Access-Control-Allow-Origin css跨域

关于Fundebug

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了10亿+错误事件，得到了Google、360、金山软件、百姓网等众多知名用户的认可。欢迎免费试用！

版权声明

转载时请注明作者Fundebug以及本文地址：

https://blog.fundebug.com/2017/04/07/solve-script-error/

您可能感兴趣的

• 30个极大提高开发效率的VS Code插件
• 10个JavaScript难点
• 10个最佳ES6特性
• 重新思考单元测试
• 前端错误收集（Vue.js、微信小程序）
• 不要争了！技术选择没那么重要
• 用Fundebug插件记录网络请求异常
• 没有Fundebug不能复现的BUG
• 黑科技！Fundebug支持网页录屏!
• 你还在等着用户反馈BUG?
• Fundebug抓到了这个Bug
• Fundebug支持Source Map
• Fundebug上线2周年！陪你一起Debug！
• Fundebug三周年！生日快乐！